jquery - 每 5 秒对事件做出一次反应

Question

我正在尝试使用setInterval()并单击运行功能。当我单击时，我希望somefunction()每五秒钟只运行一次该功能。

这是我的代码：

function somefunction(){ // do something }

setInterval(function(){
  $('#division').one("click",function(){
    somefunction();
  });
}, 5000);

这里的问题是，事件setInterval()正在排队并在 30 秒后说出函数somefunction()；最多运行 6 次（6 次点击）。

但我希望它只运行一次并等待接下来的 5 秒。

我试过了，.stop()虽然没有任何效果。.dequeue().clearqueue()

谢谢你的帮助！

Answer 1

忽略不到 5 秒前的每一次点击怎么样？

function somefunction() { /* do something */ }

$('#division').on("click", function () {
  var lastClicked = $(this).data("lastClicked") || 0;

  if (new Date() - lastClicked >= 5000) {
    $(this).data("lastClicked", new Date());
    somefunction();
  }
});

或者，根据最后一次安排点击，只要安排了一个动作，就忽略所有点击：

function somefunction() { /* do something */ }

$('#division').on("click", function () {
  var $this = $(this),
      lastClicked = $this.data("lastClicked") || 0,
      isScheduled = $this.is(".scheduled");

  if (!isScheduled) {
    $this.addClass("scheduled");
    setTimeout(function () {
      somefunction()
      $this.removeClass("scheduled").data("lastClicked", new Date());
    }, Math.max(0, 5000 - (new Date() - lastClicked)));
  }
});

见：http: //jsfiddle.net/Tomalak/ZXfMQ/1/

Answer 2

如果您可以使用underscore.js，那么我建议使用它的debounce功能：

$('#division').on('click', _.debounce(someFunction, 5000, true));

另外，这里有一篇关于去抖动如何工作的优秀文章。

如果你想滚动你自己的去抖动，它就像这样简单：

$('#division').on('click', (function(func, wait, immediate) {
    var timeout,
        result;
    return function() {
        var self,
            args,
            callNow;
        function later () {
            timeout = null;
            if (!immediate) result = func.apply(self, args);
        }
        self = this;
        args = arguments;
        callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(self, args);
        }
        return result;
    };
}(someFunction, 5000, true))));

...开个玩笑，这只是 underscore 的 debounce 函数内联。