javascript - 滚动时执行代码，但每隔 0.5 秒

Question

当我使用鼠标滚轮时，我会遇到这种情况，但我不希望这种情况立即发生，比如在我可以再次增加 i 后等待 50 毫秒。

var i = 0; 

function doSomething() {
  i += 1;
  console.log(i);
}

需要等待一段时间才能再次使用鼠标滚轮。

有人可以展示或解释解决方案吗？

http://jsbin.com/lisozuyami/1/edit?html,js,console,output

Answer 1

您可以尝试使用超时(查看示例)。或者您可以使用一些节流/去抖动插件，例如 this one

var i = 0;

function doSomething() {
  i += 1;
  console.log(i);
}

var actionTimer = null;

function delayedHandling(){
  clearTimeout(actionTimer);
  actionTimer = setTimeout(function() {
    doSomething();
  }, 50);
}

$(window).on('DOMMouseScroll', function(e) {
    if (e.originalEvent.detail > 0) {
      delayedHandling();
    }
  })
  .on('mousewheel', function(e) {
    if (e.originalEvent.wheelDelta < 0) {
      delayedHandling();
    }
  });