如何防止滚动事件发生多次火灾？答案

【问题标题】：How to prevent multiple fires for scroll event?如何防止滚动事件发生多次火灾？
【发布时间】：2016-09-03 21:12:51
【问题描述】：

我尝试防止多次滚动事件，例如250 毫秒内只有一个事件。为此，我在 Internet 中找到了下面的 debounce 功能。但我无法正确使用它。怎么了？

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

// my code..
$(window).on('scroll', function (e) {

  debounce(function() {
    // The stuff below doesn't work.
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 50) {
        $('.title').addClass('fixedPosition');
    } else {
        $('.title').removeClass('fixedPosition');
    }    
  }, 250);

});

【问题讨论】：

我会向窗口对象添加一个互斥锁，并使用 setTimeout 函数每 250 毫秒异步释放它
删除包装函数，只需调用 debouce 作为on 的处理程序参数。
与here 讨论的类似。您需要调用返回的函数 => debounce(function(){/**/}(), 250);
@Teemu 我听不懂。你能写出来吗？

标签： javascript jquery

【解决方案1】：

由于函数debounce返回的是一个函数，所以还是需要调用它：

$(window).on('scroll', function (e) {
    debounce(function() {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > 50) {
            $('.title').addClass('fixedPosition');
        } else {
            $('.title').removeClass('fixedPosition');
        }    
    }()/*note the call here*/, 250);
});

这与将去抖动逻辑包装在另一个函数中不同，而函数 myLogic 将被自动调用：

function myLogic(){
    var scrollTop = $(window).scrollTop();
    $('.title').toggleClass('fixedPosition', scrollTop > 50);
}

$(window).on('scroll', debounce(myLogic, 250));

【讨论】：

谢谢，它有效。我记录了函数调用时间。结果：1472906895811 1472906895835 1472906895855 1472906895874 1472906895898 1472906895922 1472906895944 1472906895966 似乎小于 250ms。为什么？
也许你想要节流而不是去抖动？请参阅difference。
是的，我想要油门。我认为上面的代码表现得像油门。只是名字有误？
您可以尝试simpler version 的油门，看看是否适合您。不知道你从哪里得到的。看起来像这样one。第三个参数immediate 有点泄露它，所以它是一个去抖函数。