jquery - 1秒に1回だけクリックすると関数を起動します（jQuery）

Question

ページにボタンがあり、1秒に1回最大で起動したい。つまり、ユーザーが狂人のように5秒間クリックすると、5回しか実行されません。Stackをグーグル検索して検索しましたが、結果がありません。Almanのスロットル/デバウンスプラグインも試しましたが、クリックでは機能しないようです。

Answer 1

タイマーを使う

 var clicked = false;
 setInterval(function(){
     clicked = false;
 },5000);

if($('.button').click(function(){
   if(!clicked){
      do job;
      clicked = true;
   }
});

Answer 2

ボタンのクリックイベントでボタンを1秒間無効にしてみませんか？

$('#my_button').click(function() {
    /*
    your logic here
    */

    // disable the button for 1 second
    $(this).attr('disabled', 'disabled').delay(1000).removeAttr('disabled');
} 

Answer 3

前のクリックから1秒が経過していない限り、イベントを終了するスロットルを作成します。

var clicked = false;
$(element).click(function(e){
    e.preventDefault();
    if (clicked) {
        return;
    }
    clicked = true;
    console.log("Do Stuff");
    setTimeout(function(){
        clicked = false;
    },1000);
});

または、データプロパティを使用して、余分な変数を回避できます。

$(element).click(function(e){
    e.preventDefault();
    if ($(this).data("clicked")) {
        return;
    }
    $(this).data("clicked",true);
    console.log("Do Stuff");
    setTimeout(function(){
        $(this).data("clicked",false);
    },1000);
}).data("clicked",false);

Answer 4

代わりにこれを試してください：

$(function(){
    var currentTime = (new Date()).getTime();
    $("input:button").click(function(){
        var nowTime = (new Date()).getTime();
        var diff = Math.abs((nowTime - currentTime)/1000);

        if(diff < 1) 
            return;

        currentTime = nowTime;

        // do your stuff
    });
});