點擊滾動按鈕，每隔幾秒鐘點擊一次

Question

我正在使用Prestashop網站的插件，每次點擊按鈕時都會調用Instagram API。我需要這樣的事情發生在滾動，所以：

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

這種運作良好，但是，點擊按鈕的方式太多次，並導致被重複一樣的圖像錯誤。每次點擊後如何設置休息或暫停時間？像點擊一樣，等待2秒鐘，然後才能進行下一次點擊？

Answer 1

這個怎麼樣

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

這是因爲onscroll事件會在時間的短短多次調用。您可以使用類似debouncing

反彈功能不允許在給定時間範圍內多次使用回調。將回調函數分配給頻繁觸發事件時，這一點尤爲重要。

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

你會通過防抖動功能來執行功能，以毫秒爲單位的消防速率限制。下面是修改後的代碼，以滿足您的要求：

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

window.addEventListener('scroll', myEfficientFn); 

參考

DavidWalsh