setTimeout和時延不工作

Question

我有以下代碼：

var wait = 500; 
$(document).on("click",".new_game_list_row",function(event){ 
     var self = $(this); 
     //As the element clicked on has it's data attributes defined 
     //Retrieves it when the element is clicked on 
     var id_quiz_list = self.data('quizlistId'), 
      difficult = self.data('difficult'); 
      userid = $("#new_game_list_wrap").data('userid'); 
       setTimeout(function(){ 
        $.post("new_game_add.php","userid="+userid+"&id_quiz_list="+id_quiz_list+"&difficult="+difficult,function(data){ 
         $answer = data; 
         $("#new_game_list_wrap").fadeOut("slow",function(){ 
          self.remove(); 
          $("#quiz_list_wrap").append('<div class="quiz_list_row" data-quizlist-id="'+id_quiz_list+'" data-quizlevel-reached="0" '+ 
          '><div class="inline list_cell" id="quiz_list_cell_rownew_id1">Quiz '+id_quiz_list+'</div><div '+ 
          'class="inline list_cell" id="quiz_list_cell_rownew_id2">Current level: 1</div>'); 
          showtrick(id_quiz_list,1); 
         }); 
        }, "html"); 
       }, wait); 
    }); 

我試圖用setTimeout()以避免在該行多點擊。我的桌子上滿是幽靈條目。

我試過延遲，但它沒有工作。

有什麼想法？

Answer 1

我解決了這一點：

var isClickable=true, wait = 500; 
$(document).on("click",".new_game_list_row",function(event){ 

    if(isClickable) { 
     isClickable = false; 
     var self = $(this); 
     //As the element clicked on has it's data attributes defined 
     //Retrieves it when the element is clicked on 
     var id_quiz_list = self.data('quizlistId'), 
      difficult = self.data('difficult'); 
      userid = $("#new_game_list_wrap").data('userid'); 
      $("#new_game_list_wrap").fadeOut("slow"); 
      $.post("new_game_add.php","userid="+userid+"&id_quiz_list="+id_quiz_list+"&difficult="+difficult,function(data){ 
       $answer = data; 
        self.remove(); 
        $("#quiz_list_wrap").append('<div class="quiz_list_row" data-quizlist-id="'+id_quiz_list+'" data-quizlevel-reached="0" '+ 
        '><div class="inline list_cell" id="quiz_list_cell_rownew_id1">Quiz '+id_quiz_list+'</div><div '+ 
        'class="inline list_cell" id="quiz_list_cell_rownew_id2">Current level: 1</div>'); 
        showtrick(id_quiz_list,1); 
      }, "html"); 
       setTimeout(function(){ 
        isClickable = true; 
       }, wait); 
    } 
}); 

問題解決了。

Answer 2

乍一看，我沒有看到「等待」被定義在任何地方，這需要一個毫秒的整數值。除此之外，可能會有更好的關閉方式，例如，當發生點擊事件時立即關閉綁定，然後使用setTimeout在n毫秒內重新打開它。

您可以使用cookie或窗口變量來存儲「isClickable」標誌，並且只能在可點擊的情況下執行您的邏輯。根據需要打開和關閉isClickable。也許在按鈕上顯示一個半透明的div，將其變灰並使其不可點擊鼠標。

看起來好像沒有很好的理由從dom中刪除元素，然後在稍後添加它。長話短說，我在超時時看到的唯一問題是可能無法設置等待。 jQuery我認爲你最好走一條不同的路線，而不是實際操縱dom本身。 （隱藏，重疊或只是停止處理點擊）。

Answer 3

如果你想只是有click事件忽略x秒的任何行動，你可以寫這樣的事情：

HTML

​<button>Click Me</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

JQuery的

​$("button").click(function(){ 
    var $this = $(this); 
    if(!$this.data("disabled")){ 
     alert("You clicked the button. You won't be able to click it again for 5 seconds."); 

     $this.data("disabled", true); 
     setTimeout(function(){ 
      $this.data("disabled", false); 
     }, 5000); 
    } 
});​​​​ 

Demo in jsfiddle

如果該按鈕的disabled數據集設置爲true，則它只會跳過點擊事件的內容。

如果它不是disabled它將運行它的代碼，然後禁用它自己。使用setTimeout它可以在x秒內重新啓用它自己。