javascript - 防止 onScroll 函数再次执行直到完成

Question

我正在制作幻灯片的变体，当用户向上/向下滚动时，幻灯片会淡入/淡出。基本流程是这样的:

1. 用户移动滚轮
2. 使用 $(window).on('DOMMouseScroll mousewheel') 检测移动
3. 检测滚动是向上还是向下并跟踪滚动了多少
4. 一旦滚动量在任一方向达到阈值，根据滚动方向显示上一张/下一张幻灯片

问题是在某些设备上，特别是触控板和“魔术”鼠标(触摸)，onScroll 函数会执行多次。我希望函数运行一次，完成，然后在再次运行之前等待额外的 onScroll 事件。

这是我的代码的简化版本。

$(function() {


  var delta = 0;
  var wait = false;
  var scrollThreshold = 5;

  $(window).on('DOMMouseScroll mousewheel', function(e){  

    if (wait === false) {

      // If the scroll is up
      if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {

        // Track the amount of scroll
        delta = Math.min(0,delta - 1);

        if ( Math.abs(delta) >= scrollThreshold) {


          wait = true;

          // Go to the previous slide
          // This changes the class of the current and previous slides
          // causing several CSS transitions.
          $(active).removeClass('active');
          $(prev).addClass('active').removeClass('zoom');

          $(active, prev).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {

            wait = false; 
            delta = 0;

          });

        }

      // If the scroll is down
      } else {

        // Track the amount of scroll
        delta = Math.max(0,delta + 1);

        if ( Math.abs(delta) >= scrollThreshold) {

          wait = true;

          // Go to the next slide
          // This changes the class of the current and next slides
          // causing several CSS transitions.
          $(active).addClass('zoom').removeClass('active');
          $(next).addClass('active');

          $(active, next).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {      

            wait = false; 
            delta = 0;

          });

        }

      }

    }

  });

问题是 wait 标志不会阻止该函数在触摸板和“魔术”鼠标上再次运行。

让函数运行一次，然后等到它完成后再监听新的滚动事件并再次运行的推荐方法是什么？

Answer 1

如果您使用的是 underscorejs图书馆(太棒了)有一个名为 _.debounce 的函数，它将完成你正在尝试做的事情。

这是函数的代码。图书馆的评论完美地解释了它:-)

// 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.
_.debounce = function(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);
    };
};

编辑:这里是来自 David Walsh 的代码重构此函数以单独使用

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
    };
};

示例用法

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

window.addEventListener('resize', myEfficientFn);