javascript - 延迟鼠标滚轮功能

我正在使用鼠标滚轮和航点插件来滚动页面的各个部分；我遇到的问题是，当我使用苹果强大的鼠标滚动时，滚动太敏感了，动画完成后，功能触发的次数要多于一次。我试图设置一个超时函数和变量来检查动画是否完整，但是这些都不起作用。

我想复制与website类似的效果。

JQUERY

  $('body').mousewheel(function(event, delta, deltaX, deltaY) {

  clearTimeout(interval);

  console.log('test');

    $('section').waypoint(function(direction){
      thisID = $(this);
    },{ offset: '350' });

    indexPos = thisID.index('section');

    if (completed == true) {
      completed = false;

      var interval = "";
      if (delta > 0) {
          interval = setTimeout(function(){
            if ($(this).not(":first-child")) {
              //$(this).animate(function(){
                  $('html, body').stop().animate({
                      scrollTop: thisID.prev().offset().top - 200
                  }, 1000, 'swing' , function() { completed = true; });
                //});
            }else {
              $('html, body').stop().animate({
                      scrollTop: thisID.offset().top - 200
                  }, 1000, 'swing' , function() { completed = true;  });
            }
          },400);
        }
      else if (delta < 0) {
        interval = setTimeout(function(){
        if ($(this).not(":first-child")) {
            $('html, body').stop().animate({
                  scrollTop: thisID.next().offset().top - 200
              }, 1000, 'swing' , function() { completed = true; });
          }
          else {
            $('html, body').stop().animate({
                  scrollTop: thisID.offset().top - 200
              }, 1000, 'swing' , function() { completed = true;  });
          }
          },400);
      }

    };

      return false; // prevent default

  });

最佳答案

我不知道它在做什么：indexPos = thisID.index('section');，但是在做任何事情之前，我会检查是否正在进行任何操作：

$('body').mousewheel(function(event, delta, deltaX, deltaY) {
    if($('html').is(':animated') || $('body').is(':animated')) return false;
    // else, do your stuff...
});

关于javascript - 延迟鼠标滚轮功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18262585/