使用jQuery初始化.mousedown（）事件后防止后续触发

Question

问题描述（Fiddle）：

多次单击 #test 框会同时创建音频层，并在每次按下时暂停或错开.fadeOut()效果。我希望防止后续的mousedown事件被触发，以便.fadeOut()效果无缝完成，并且不会触发其他音频播放。

代码：

$('#test').mousedown(function() {
  var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
  sound.play();
  $('#test').stop(true).fadeOut(2000);
});

Answer 1

这将触发一次事件：http://api.jquery.com/one/

Answer 2

 $('#test').one('click',function() { //would only trigger on first click
  var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
  sound.play();
 $('#test').stop(true).fadeOut(2000);

 $('#test').click(function(){ // for subsequent click write the function inside this

 });
});

Answer 3

简单方法：

var clicked = 0;
$('#test').mousedown(function () {
    if (clicked == 0) {
        clicked = 1;
        var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
        sound.play();
        $('#test').stop(true).fadeOut(2000);
        setTimeout(function(){clicked = 0;}, 2000);
    }
});

http://jsfiddle.net/yxDSL/1/

Answer 4

这就是诀窍......

$('#test').mousedown(function() {
  var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
  sound.play();
  $('#test').unbind("mousedown").stop(true).fadeOut(2000);`
});