Как отменить setTimeout по событию скроллинг мышью?

Question

[maiskiykot]

Есть список, формируемый по Ajax из элементов li. Он имеет прокрутку из-за большого размера. Когда пользователь начинает прокручивать список нужно обработать это событие и отменить выполнение скрипта по setTimeout. Загвоздка у меня в том: как прописать это? Список формируется динамически, а значит в html не добавить событие. И какое событие нужно в данном случае? onMouseMove или что?

Answer 1

[Антон Спирин]

var timeout = setTimeout(handler, duration);

element.addEventListener('scroll', scrollHandler);

function scrollHandler() {
  clearTimeout(timeout);
  element.removeEventListener('scroll', scrollHandler);
}

или:

var timeout = setTimeout(handler, duration);

element.addEventListener('scroll', function() {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
});

где element - элемент на котором вы хотите обрабатывать событие scroll.

В первом случае слушатель события scroll, по первому событию отменяется. Во втором остается и если таймер будет переназначен, по scroll он снова будет отменен.

Comments

[maiskiykot]

Куда вставлять данный код? В head или можно в класс скриптов?

[Антон Спирин]

На месте: setTimeout(handler, duration); должен быть ваш вызов setTimeout.

[Антон Спирин]

maiskiykot, это же очевидно. На месте: setTimeout(handler, duration); должен быть ваш вызов setTimeout.

[maiskiykot]

Не так уж очевидно. В скриптах не срабатывает. Придется в head толкать, что не очень хорошо для меня.

[Антон Спирин]

maiskiykot, если выдает ошибку, значит что-то неправильно делаете.
Покажите свой код.

[maiskiykot]

Мне нужно, чтобы обрабатывалось событие в конкретной области - скажем ul li. А точнее на полосе прокрутки этой области

[Антон Спирин]

maiskiykot, замените window на нужный элемент. Ответ обновил.

[maiskiykot]

ReferenceError: element is not defined - на второй вариант. Первый не заметил изменений. А где в вашем ответе window?

[Антон Спирин]

maiskiykot, вместо element вы должны подставить свой элемент.

Вы бы вместо того, чтобы задавать вопросы, ответы на которые с трудом способны понять, потратили бы лучше время на изучение основ JavaScript.

[maiskiykot]

JS в мои задачах попадается раз в год. Раз в год и учусь. А какой у меня элемент? Список динамический - как ему присвоить элемент?

[Антон Спирин]

maiskiykot,
document.getElementById
document.querySelector

[maiskiykot]

Нет у него id. Ajax создает. То же самое к querySelector. Как с его помощью перехватить элемент, на котором идет скроллинг? Там есть только статичный div, внутри которого формируется список. Но у него не может быть полосы прокрутки.

container.style.display = "none";

        var list = JSON.parse(jsonStr);
        var ul = document.createElement("ul");

        for (var i = 0; i < list.length; i++ ) {
            var li = document.createElement("li");
            li.dataset.value = list[i]["value"];
            if (/[а-я]+/.test(list[i]["value"])) {
            li.innerHTML = list[i]["caption"]+' : '+list[i]["value"];
            }
            else
            {
             li.innerHTML = list[i]["caption"];
            }
            ul.appendChild(li);
        }
        container.replaceChild(ul, container.firstChild);
        container.style.display = "block";

Внутри этой штуки мне надо обрабатывать события

[Антон Спирин]

maiskiykot, элементы создаются в отрывке кода, который вы только что прислали. Если бы вы хоть немного понимали JavaScript, который у вас, к слову, указан в специализации на Freelansim, вы бы это видели.

Вам тут даже элемент получать не надо, вы его сами создаете.

Наймите фрилансера, он решит за вас задачи без печальных последствий. Ну за 16 лет в индустрии, JavaScript можно раз 50 с нуля изучить до уровня JS-ниндзя.

По вашей проблеме все просто:

var ul = document.createElement("ul");
ul.addEventListener('scroll', scrollHandler);

function scrollHandler() {
  clearTimeout(timeout);
  ul.removeEventListener('scroll', scrollHandler);
}

Естественно перед этим надо определить переменную timeout.

[maiskiykot]

Я пытаюсь сам решить задачу. Прибегая к помощи сообщества. Спасибо за советы, но я не программирую на JS. Уровень знаний у меня как был начальный так и остался. Я программирую на PHP, однако и там случается, что мозг впадает в ступор. У вас же тоже есть выбор - отвечать или нет. В любом случае давайте друг друга жизни не учить, потому что на пыхе я делал такие проекты, что многим тут и не снилось.

[Антон Спирин]

maiskiykot, а это ничего, что вы нарушаете правила сообщества? Тут запрещено публиковать задания. Вам лень изучить JavaScript и вы скидываете часть работы сюда. На этой площадке помогают людям, а не делают за них их работу.

[maiskiykot]

Задания? Этот скрипт для моего личного проекта. И я не скидываю часть работы - я просто прошу помочь с одной маленькой проблемой, которую я так и так решил бы, но с помощью быстрее. Этот скрипт я уже переделал настолько, что там только рожки да ножки остались, но вот со всеми этими элементами-объектами у меня всегда беда была, поэтому и забуксовал.

[maiskiykot]

Кстати последний вариант тоже не работает. Таймаут не отменяется.

[Антон Спирин]

maiskiykot,

я просто прошу помочь с одной маленькой проблемой, которую я так и так решил бы, но с помощью быстрее.

Сильно сомневаюсь, что вы бы ее решили сами, учитывая тот факт, что вы не понимаете, что написано в отрывке кода, который вы скинули.
Просто потратьте время на изучение основ JavaScript и хотя бы уверенно код читать будете и правильно его понимать. Хорошее для этого место тут.

Кстати последний вариант тоже не работает. Таймаут не отменяется.

Все должно работать. Похоже, что вы его неправильно используете.

Демо с вариантом 1
Демо с вариантом 2

[maiskiykot]

Так такие demo я бы без чьей-либо помощи соорудил. Там статичные элементы, прописанные в html. Я и не скрываю, что не понимаю - потому и обратился за помощью. Однако это скорее вы не понимаете: в каком месте нужен скроллинг, отменяющий таймаут.

[maiskiykot]

Так я половину этого кода сам написал. Как не понимать? Эта часть прекрасно работает и вопросов к ней нет. Зачем ее комментировать? Я даже повесил отмену setTimeout при вводе букв в поле инпут. Проблема у меня единственная - понять: как обработать событие при скролле этого списка. Пока что ваши варианты не срабатывали.

[Антон Спирин]

maiskiykot,

Там статичные элементы, прописанные в html.

Так тут еще проще. Вы, просто, добавляете id нужному элементу в html и получаете его в js c помощью document.getElementById('idВашегоЭлемента');.
В моей демке если не заметили, такие же статичные элементы.

Вам просто надо найти элемент на котором проявляется скролл и повесить на него слушатель.

[maiskiykot]

Едрид-ангидрид! Какой html? В html сушествует лишь блок-обертка. На него я пытался события вешать - не работает.

<div class="list-wrap"  onMouseScroll="cleanTimer();" (это я пытался подставлять функцию очистки таймера)>
                <ul></ul>
            </div>

[Антон Спирин]

maiskiykot,

Какой html? В html сушествует лишь блок-обертка.

Сначала вы пишите, что у вас там статичные элементы, а теперь это. Определитесь уже.

onMouseScroll? Откуда вы вообще это взяли? Сами придумали?

Я даже не видев всего вашего кода, вангую, что list-wrap это тот самый container из JS кода и вам достаточно написать в том коде:
container.addEventListener('scroll', cleanTimer);

[maiskiykot]

OnMouseOver неожиданно сработал на div list-wrap. Думаю, что пусть будет так.

[maiskiykot]

По вашему последнему способу вообще таймаут убивается. Остановился пока на onMouseOver. Хотя понимания опять не добавилось.

[maiskiykot]

Но теперь опять простыня зависает и если нет выбора весь экран закрыт. Может просто перезапустить таймаут?

[Антон Спирин]

maiskiykot, задачи надо решать прямым путем, а не лишь бы как. Это событие никак со скроллом не связано, оно срабатывает при наведении. А обрабатывать события в html очень плохой тон.

[maiskiykot]

Так и сделал. Сначала очистил таймаут, потом перезапустил скрипт сокрытия. Тема закрыта. Всем спасибо!

[maiskiykot]

Понятно с тоном. Однако ваш вариант не работает. Таймаут не отрубается

[maiskiykot]

Поправка. Переставил в другое место и заработало! Теперь персональное спасибо, Антон! Добавил только перезапуск таймаута сокрытия. Век живи - век лечись!