Klicken Sie auf Scroll, nur ein Klick alle paar Sekunden

Question

Ich arbeite mit einem Plugin für eine Prestashop-Website, die jedes Mal einen Aufruf der Instagram-API aufruft, wenn Sie auf eine Schaltfläche klicken. Ich brauchte das auf Blättern passieren, so:

$(window).scroll(function() { 
     if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
     $("#pwip__loadmore").click(); 
     } 
}); 

Dies funktioniert gut, aber es klickt auf den Knopf viel zu oft und verursacht Fehler wie Bilder wiederholt. Wie kann ich nach jedem Klick einen Ruhe- oder Timeout-Zeitraum festlegen? Wie klicken, warten Sie 2 Sekunden, bevor der nächste Klick passieren kann?

Answer 1

Wie über diese

var clickable = true; 

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
     if(clickable){ 
      $("#pwip__loadmore").click(); 
      clickable = false; 
     } 
     setTimeout(function(){ 
      clickable = true; 
     }, 2000); 
    } 
}); 

Answer 2

Das liegt daran, dass onscroll Ereignis mehrfach in der kurzen Zeitspanne nennen. Sie könnten etwas wie debouncing

verwenden Die Entprellen-Funktion wird nicht erlauben, einen Rückruf mehr als einmal pro gegebener Zeit verwendet werden. Dies ist besonders wichtig beim Zuweisen einer Callback-Funktion zu häufigen Ereignissen.

// Returns a function, that, as long as it continues to be invoked, will not 
// be triggered. The function will be called after it stops being called for 
// N milliseconds. If `immediate` is passed, trigger the function on the 
// leading edge, instead of the trailing. 
function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
}; 

Hier finden Sie die Entprellfunktion die Funktion auszuführen und die Feuerrate Grenze in Millisekunden vergehen. Unten ist der modifizierte Code Ihrer Anforderung gerecht zu werden:

var myEfficientFn = debounce(function() { 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
    $("#pwip__loadmore").click(); 
    } 
}, 1000); 

window.addEventListener('scroll', myEfficientFn); 

Referenz

DavidWalsh