Ответы пользователя по тегу JavaScript
  • Как данный скрипт переделать чтобы он работал для всех блоков?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    <script >
     var handler = function () {this.innerHTML = '<iframe width="400" height="300" src="https://www.youtube.com/embed/GXFqyu0DkrU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'};
     [...document.querySelectorAll('.video')].forEach(e=>e.addEventListener('click', function (e) { this.removeEventListener('click', handler, false); handler.apply(this, arguments); } , false));
                 </script>
    Ответ написан
  • Что лучше для простых анимаций? CSS или JavaScript?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Лучше CSS, если возможно.

    JS может быть отключён у пользователя. И хорошо, если ваши анимации просто не будут работать. Плохо, если сайт станет менее удобным из-за этого.

    Однако на JS можно то, что нельзя на CSS. В общем, на JS можно практически всё. И в некоторых случаях проще и красивее делается именно на JS. В этом смысле нужно отталкиваться от того, что вам удобнее применить в данном конкретном случае.
    Ответ написан
    Комментировать
  • Как остановить setTimeout?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Вам нужно четыре разных таймера, то есть их идентификаторы нужно записывать в разные переменные. А в секции after, соответственно, четыре раза подряд вызвать clearTimeout()
    //например
    var timerInSlider1, timerInSlider2, timerInSlider3, timerInSlider4;

    Вообще, по-хорошему, лучше сделать небольшой цикл, так будет красивее и правильнее с точки зрения повторного использования кода.
    Как-то так:
    //Минимальные изменения вашего кода
    var timerInSlider = [1,2,3,4]; //массив для четырёх таймеров
    
    $.scrollify({
        section: ".section",
        scrollbars: true,
        interstitialSection: ".non-full-height",
        overflowScroll: true,
        before: function(indexBigSlider, sections){
            if(indexBigSlider == 2) timerInSlider.forEach((e,i) => { //цикл
    
                timerInSlider[i] = setTimeout(function(){
                    $(".fullwidth-slider").trigger('owl.next');
                    console.log((i+1)+" итерация");
                }, 12000 * (i+1)); //время зависит от номера таймера
    
                //остальной код убрали
            });
        },
        after: function(indexBigSlider, sections){
            if(indexBigSlider == 3){
                console.log("След слайдер");
                //также в цикле убираем
                timerInSlider.forEach(e=>clearTimeout(e)); 
            }
        }
    });
    Ответ написан
    Комментировать
  • Как оптимизировать подгрузку содержимого?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Если пользователи так много "крутят" колесо мыши, то может лучше сделать нормальный поиск по комментариям? Или фильтр с гибкими условиями. Тогда будут меньше крутить, и миллион сократится до 100 штук внезапно.

    В общем случае надо понять, из-за чего фризы. И это место оптимизировать. Может быть, у вас просто памяти не хватает, и своп начинается. Или у вас каждую секунду происходит перебор всех комментариев (зачем-то, это пример).

    То есть надо понять, в каком месте у вас сложность алгоритма O(N) или не дай бог O(N2).
    Ответ написан
    Комментировать
  • Как навесить addEventListener на элемент который создается с помощью js?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Для начала, карта в iframe? Если да, то это не ваша территория.
    Если нет, то можно повесить событие хоть на document и смотреть event.target
    Ответ написан
    1 комментарий
  • Почему функция не работает при нажатии на кнопку?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    $("#comment-load").click(e=>console.log('А клик вообще работает у вас?'));


    $("#comment-load").click(function (){
      console.log('Функция должна работать');
      loadcomment(p, kolovo);
      console.log('Вот и сработала');
    });
    Ответ написан
  • Как реализовать: если в конце URL есть пара заданных букв, то скрыть div 1 если нет, то скрыть div 2?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    URL текущей страницы хранится в location.href
    Скрыть div можно через .style.display = 'none'
    Ответ написан
  • Как написать регулярное выражение для js кода, которое удаляет все символы и слова из 4 и менее букв?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    var s = 'Благовещенский р-н, Степное Озеро рп, Попова ул, 14';
    var test = s.replace(
      /(?:[^а-яА-ЯёЁ\w]|^)[а-яА-ЯёЁa-zA-Z.,-]{1,4}(?=[^а-яА-ЯёЁ\w]|$)/g,
      '');
    console.log(test); //Благовещенский Степное Озеро Попова 14
    Ответ написан
  • Зависит ли последовательность прорисовки сайта от асинхронной загрузки?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    CSS стили и некоторые скрипты лучше загружать синхронно. На скорость влияет, но не сильно. Зависит от того, куда ведут ссылки. Если это известные библиотеки, то они закэшированы и практически не влияют на скорость. Если css файлы грузятся с того же сайта с keep-alive, то влияния на скорость тоже практически нет.

    Всё "необязательное" типа блоков промо, рекламы, какой-то сложной инфы, которую нужно сначала собрать на сервере, можно и асинхронно вливать в уже загруженный сайт. А меню и ключевой контент - лучше синхронно, а еще лучше не сильно распихивать по файлам на разных сайтах.
    Ответ написан
    Комментировать
  • Как создать путь к элементу ассоциируемого массива(объекта) с возможностью редактирования?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Вы ошибаетесь, это не клон, а ссылка. И удалить получится.
    Просто если вы дойдёте то строки или числа, то получите уже само значение, то есть копию. А объекты и массивы передаются по ссылке во время присваивания. Вывод: не доходите до строки/числа.
    var way = ['things','equipment','car'];
    //......
    console.log('Было: ', test_array.things.equipment.car.id1); // "00"
    array_clone2.id1 = 999;
    console.log('Стало: ', test_array.things.equipment.car.id1); // 999
    
    var way = ['things','equipment','car','id1'];
    //......
    console.log('Было: ', test_array.things.equipment.car.id1); // "00"
    array_clone2 = 999;
    console.log('Стало: ', test_array.things.equipment.car.id1); // "00"
    Ответ написан
  • Как заменить символы в Json при помощи JS?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Хранить в БД числа, а не строки.

    P.S. В JavaScript можно конвертировать разными способами. Например, так:
    arr[0].min -= 0;
    arr[1].min -= 0;
    Ответ написан
    Комментировать
  • Почему код возвращает пустой объект?

    dollar
    @dollar Автор вопроса
    Делай добро и бросай его в воду.
    у оператора доступа к свойству приоритет выше
    Ответ написан
    Комментировать
  • Что такое синхронный и асинхронный код?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Синхронный вешает весь процесс до тех пор, пока не выполнится, и лишь затем передает управление дальше, нижестоящему коду.

    Асинхронный код делает паузу и передает управление дальше, но точка останова запоминается и управление к ней возвращается в будущем при каком-то условии. Например, таймер или событие. Таким образом, процесс не висит. Более того, ниже могут быть инициализированы какие-то переменные, которые нужны для выполнения асинхронного кода, а пока этот код нельзя выполнять.
    Ответ написан
  • Как можно из получившейся строки вырезать слово (например)“легким”, в этом же слове заменить 2 последние буквы на букву “о”?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Из получившейся строки вырезать слово “легким”, в этом же слове заменить 2 последние буквы на букву “о”

    Странное задание.
    var str = 'урок-3-был слишком легким';
    var word = 'легким';
    str = str.replace(word, ''); // 'урок-3-был слишком '
    word = word.replace(/.{2}$/, 'о'); // 'легко'
    Ответ написан
    1 комментарий
  • Память расширения растёт. Куда копать?

    dollar
    @dollar Автор вопроса
    Делай добро и бросай его в воду.
    А ларчик просто открывался.
    Решение

    С расширением всё нормально. Но самом деле потребление прыгает, но оно всегда не выше 50МБ.
    Проблема была в том, что инструменты разработчика кэшируют всё, что только можно - вывод консоли, сетевые соединения, тела принятых ответов с сервера через ajax и прочее. И вот эти тела и составляли основную как бы "утечку" памяти.
    То есть нужно закрыть консоль, перезагрузить расширение, - и нет проблем с якобы утечкой.
    Ответ написан
    Комментировать
  • Как разложить js массив состоящий из ID на индексы, индексы засунуть в input в блок относящийся к ID?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Сложность именно в написании вложенных циклов который пройдётся по массиву соберёт индексы, следующим циклом переберёт элементы сопоставит с результатом первого цикла if 132=132 и запишет в инпут index у которого родитель с id 132

    Думаю, всё решается в два этапа.

    Первый этап - массив с индексами превращаем в объект с ключами. Ведь каждый раз искать элемент в массиве не красиво. А поиск по ключу (или хешу) - наше всё. Ну, можно ещё массив с индексами сделать, но это дело вкуса.
    var obj = {};
    sort_id.forEach(id=>{
      obj[id] = true;
    });


    Второй этап - перебираем все li и проверяем условия. Применяем какой-нибудь селектор - и дело в шляпе.
    var arr = document.querySelectorAll('li[data-id]');
    arr.forEach(li=>{
      let id = li.dataset.id;
      if (obj[id]) { //Нашли id в массиве sort_id
        //Что-то делаем. У нас есть всё: id и соответствующий li. Что ещё надо?
      }
    });

    3 дня вожусь с этим.

    Ответ написан за 10 минут. :)
    Ответ написан
    9 комментариев
  • Какую библиотеку использовать для парсинга url со стороны клиента?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Регулярные выражения вам вполне подойдут. Никакой библиотеки не надо.
    Ответ написан
    Комментировать
  • В чём заключается утечка памяти в коде?

    dollar
    @dollar Автор вопроса
    Делай добро и бросай его в воду.
    Проблема оказалась гораздо глубже. А именно - в движке V8.
    То есть она касается только Chrome и Node js.
    Копать пришлось долго. И проблема ещё не решена, предстоит изучить этот баг и обойти его во всех местах программы (а их очень много).

    В вопросе мало данных, за это прошу прощения.

    И профилировщиком сложно пользоваться, так как GC чистит память с большими задержками. Графикам нельзя верить.
    Ответ написан
  • Возможно ли поймать событие загрузки элемента?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Примерно так:
    let style = document.createElement('style');
    style.innerHTML = `
    div {
    	animation-name: nodeReady;
    	animation-duration: 0.001s;
    }
    
    @keyframes nodeReady {  
    	from { clip: rect(1px, auto, auto, auto); }
    	to { clip: rect(0px, auto, auto, auto); }  
    }
    `;
    document.head.appendChild(style);
    
    document.addEventListener("animationstart", function(e) {
    	if (e.animationName == "nodeReady") {
    		if (e.target.innerHTML.trim() == 'привет') e.target.innerHTML = 'Пока';
    	}
    }, false);

    По стилям там сами смотрите. Если у вас есть class, например, можно вместо div его указать:
    .mydiv {
    	animation-name: nodeReady;
    	animation-duration: 0.001s;
    }

    Если вы инжектитесь из расширения, то у вас не будет ни элемента head, ни body. Придётся использовать какой-то такой костыль:
    document.children[0].appendChild(style);
    Ответ написан
    Комментировать
  • Актуален ли IE11 в 2019м?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Это примерно 3-5% пользователей.
    Они вам критичны?

    Полная кроссплатформенность быть не может, потому что придется учесть все старые браузеры вплоть до прошлого века. Определитесь, кем вы готовы пожертвовать, то есть начиная с каких версий текущих браузеров вам нужна поддержка.

    В любом случае вы можете сделать небольшую проверку в начале (отдельным скриптом):
    try{ eval("let x"); alert("ES6+"); } catch(e) { alert("ES5-"); }

    Естественно, вместо alert'ов нужны ваши варианты действий. Например, редирект с просьбой проапгрейдиться.
    Ответ написан