4

クリックして関数を実行しようとしていsetInterval()ます。somefunction()クリックしたときに5秒に1回だけ関数を実行したい。

これが私のコードです：

function somefunction(){ // do something }

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

ここでの問題は、イベントsetInterval()がキューに入れられており、30 秒後に関数が呼び出されることsomefunction()です。最大 6 回実行されます (6 クリックの場合)。

しかし、一度だけ実行して、次の 5 秒間待ちたいと思います。

試してみましたが.stop()、何も機能.dequeue()しませんでした。.clearqueue()

ご協力いただきありがとうございます！

4

2 に答える 2

4

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

...冗談です、それはアンダースコアのデバウンス関数のインラインです。

于 2013-01-24T18:59:56.820 に答える
4

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/

于 2013-01-24T18:03:37.640 に答える