Событие .click срабатывает несколько раз
На странице есть ссылка с id get-more-posts, по клику на которую загружаются статьи. Изначально он находится за пределами экрана. Задача состоит в том, чтобы прокрутить экран до этой ссылки, нажав на нее. Код ниже делает то, что вам нужно. Но событие называется много раз. Нужен только один клик, когда я доберусь до прокрутки этого элемента.
p.s. Извините за мой плохой английский
$(window).on("scroll", function() {
if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
$('#get-more-posts').click();
}
});
На первой странице 6 постов. При переходе по ссылке загружается еще 6. Итак, теперь событие выполняется много раз, поэтому не 6, а 20-30 сообщений. То есть, если я правильно понял Ваш ответ, у меня плохой английский, извините.
Не могли бы вы показать пример использования debounce для моей ситуации?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Попробуйте использовать removeEventListener или используйте переменную с флагом, просто прокрутка событий сразу отделяется больше
Не могли бы вы набросать пример. Я даже не знаю, как это реализовать.
var handleScroll = функция () {if (someCandition){ окно. removeEventListener(handleScroll) } }; окно. addEventListener('прокрутка', handleScroll); // после вызова метода removeEventListener дескриптор функции прокрутка не будет прослушиваться
Вы можете настроить регулирование, проверив, выполняете ли вы уже обратный вызов. Один из способов — функция setTimeout, как показано ниже:
var throttled = null;
$(window).on("scroll", function() {
if (!throttled){
throttled = setTimeout(function(){
if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
$('#get-more-posts').click();
throttled = null;
}
}.bind(window), 50);
}
}.bind(window));
Вот версия ES6, которая может решить проблемы с областью действия, о которых я упоминал:
let throttled = null;
$(window).on("scroll", () => {
if (!throttled){
throttled = setTimeout(() => {
if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
$('#get-more-posts').click();
throttled = null;
}
}, 50);
}
});
Последний аргумент setTimeout — это задержка перед запуском. Я выбрал 50 произвольно, но вы можете поэкспериментировать, чтобы увидеть, что работает лучше всего.
Я бы проверил это в отладчике, чтобы увидеть, происходит ли что-то еще. По общему признанию, я не часто использую jquery, но у меня есть несколько ванильных проектов javascript, где я делаю все вышеперечисленное без проблем. Возможно, есть что-то, что нужно передать, чтобы дать функции некоторый контекст для работы с jQuery. Добавил некоторые правки, дайте мне знать, если они помогут.
Я был бы признателен, если бы вы взглянули.
Не знаю, насколько это правда, но работает. После события (щелчка) удалите идентификатор элемента, а затем добавьте его снова, чтобы щелчок выполнялся один раз. Прокручиваем страницу до нужного элемента, снова нажимаем, удаляем id и снова добавляем. Оно работает. Может кому пригодится.
window.addEventListener('scroll', throttle(callback, 50));
function throttle(fn, wait) {
var time = Date.now();
return function() {
if ((time + wait - Date.now()) < 0) {
fn();
time = Date.now();
}
}
}
function callback() {
var target = document.getElementById('get-more-posts');
if ((($(window).scrollTop()+$(window).height())+650)>=$(document).height()){
$('#get-more-posts').click();
$("#get-more-posts").removeAttr("id");
//$(".get-more-posts").attr("id='get-more-posts'");
};
}
window.removeEventListener('scroll', throttle(callback, 50));
Нужно понимать, что при прокрутке это будет срабатывать много раз. Необходимо использовать механизм опровергать