The event .click fires multiple times

Question

On the page there is a link with id get-more-posts, by clicking on which articles are loaded. Initially, it is outside the screen. The task is to scroll the screen to this link by clicking on it. The code below does what you need. But the event is called many times. Only need one click when I get to this element scrolling.

p.s. sorry for my bad english

$(window).on("scroll", function() {
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
    $('#get-more-posts').click();
}
});

Need to understand that while scrolling this will fire many many times. Need to use a *debounce* mechanism — charlietfl, Jul 27 '19 at 17:37
On the first page 6 posts. When you click on the link, 6 more are loaded. So now the event executes many times, so is no 6, 20-30 posts. That is, if I correctly understood Your answer, I have a bad English, sorry. — , Jul 27 '19 at 17:48
Could you show an example of using debounce for my situation? — , Jul 27 '19 at 17:49
https://stackoverflow.com/questions/24004791/can-someone-explain-the-debounce-function-in-javascript nd https://css-tricks.com/debouncing-throttling-explained-examples/ — charlietfl, Jul 27 '19 at 17:51

score 0 · Answer 1 · answered Jul 27 '19 at 16:57

0

Try use removeEventListener or use variable with flag, just event scroll detached more at once

answered Jul 27 '19 at 16:57

Sporx

29
3

Could you sketch an example. I do not even know how to implement it. – Jul 27 '19 at 17:15
var handleScroll = function () {if(someCandition){ window. removeEventListener(handleScroll) } }; window. addEventListener('scroll', handleScroll); // after call method removeEventListener function handle scroll will be not listen – Sporx Jul 27 '19 at 18:13

GenericUser · Answer 2 · 2019-07-27T18:19:32.813

You can set up throttling by checking if you are already running the callback. One way is with a setTimeout function, like below:

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));

Here's an ES6 version that might resolve the scoping issues I mentioned:

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);
    }
});

The last argument of setTimeout is the delay before running. I chose 50 arbitrarily but you can experiment to see what works best.

I would check it out in the debugger to see if there's something else going on. Admittedly I don't do jquery often but I have several vanilla javascript projects where I do the above without issue. It's possible there's something that needs to be passed along to give the function some context to do stuff with jQuery. Added some edits, let me know if they help out. — GenericUser, Jul 27 '19 at 18:09

score 0 · Accepted Answer · 2019-07-28T05:37:25.580

I don't know how true it is, but it works. After the event (click), delete the element id, and then add it again, so the click is performed once. Scroll the page to the desired item, click again, delete the id and add it again. It works. Can someone come in handy.

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));

The event .click fires multiple times

3 Answers3