阻止下一次keydown事件，直到腳本執行完成

Question

我想禁用keydown事件發生，直到keydown事件內的腳本完成執行。

$(document).keydown(function(e){ 
     if (e.keyCode == 40){ 
      down(); //Assume down has some animate function executes for 1sec 
     } 
    }); 

當前，當我按下鍵並保持不釋放，keydown事件反覆發生，我想禁用它。任何幫助將不勝感激

Answer 1

解決方案基於阿薩德回答：

$(document).keydown(function(e){ 
    if($('body').hasClass('animating')){ 
     //DO NOTHING 
    } 
    else{ 
     if (e.keyCode == 40){ 
      down(); //Assume down has some animate function executes for 1sec 
      $('body').addClass('animating'); 
     } 
    } 
}); 


$(document).keyup(function(e){ 
    $('body').removeClass('animating'); 
}); 

Answer 2

一旦keydown事件發生時你可以取消綁定事件：

$(document).keydown(function(e){ 
     if (e.keyCode == 40){ 
      down(); //Assume down has some animate function executes for 1sec 
      $(document).unbind('keydown'); 
     } 
    }); 

然後在down功能，一旦重新綁定在完成動畫（如回調，可能）。

如果你不感興趣的綁定/重新綁定，不喜歡過甜的全局變量，你可以使用一個類來表示動畫是否正在進行：

$(document).keydown(function(e){ 
     if (e.keyCode == 40 && $('body').is(':not(.animating)')){ 
      down(); //Assume down has some animate function executes for 1sec 
      $('body').addClass('animating'); 
     } 
    }); 

然後將其刪除一旦動畫已經完成，就以同樣的方式執行功能down。

Answer 3

你不能阻止觸發事件，但是你可以忽略它：

var keyIsDown = false; 
$(document).keydown(function(e){ 
    if(!keyIsDown) { 
     keyIsDown = true; 
     if (e.keyCode == 40){ 
      down(); //Assume down has some animate function executes for 1sec 
      // set keyIsDown = false; on the animation callback, inside down func. 
     } 
    } 
}); 

Answer 4

保持一些變量，並檢查它也

var isAnimating = false; 
$(document).keydown(function(e){ 
    if (!isAnimating && e.keyCode == 40){ 
     isAnimating = true; 
     down(); //Assume down has some animate function executes for 1sec 
     isAnimating = false; 
    } 
}); 

Answer 5

綁定和重新綁定是昂貴的。只需跟蹤動畫是否正在處理變量，並在再次執行前檢查：

var animating = false; 

$(document).keydown(function(e){ 
    if (e.keyCode == 40 && !animating){ 
     down(); //Assume down has some animate function executes for 1sec 
     animating = true; 
    } 

}）;

然後，您可以使用具有適當延遲的settimeout將動畫設置恢復爲false;