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

此外，这里是an excellent article about how debouncing works。

如果您希望推出自己的去抖动，那就像这样简单：

$('#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))));

......开个玩笑，这只是下划线的反弹功能内联。

每5秒仅对事件做一次反应

2 个答案: