参考

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

按钮点击滚动，每隔几秒钟点击一次

2 个答案:

参考