javascript - jQuery - div 上的 setTimeout 用于保存内容超过 x 秒

Question

所以我有 3 个 Angular 色和一个 secret Angular 色。 secret 字符应该是 .chosen 字符。到目前为止一切都很好。但是，我试图显示警报，但仅当所选字符在 secret 字符 div 中经过 3 秒时。此时，快速按键( secret 字符包含所选字符的时间少于 3 秒)会触发警报。

<div id="peter" class="chosen">peter</div>
<div id="louis">louis</div>
<div id="stewie">stewie</div>

<br><br>
<div id="secret-character"></div>

jQuery:

$(document).keydown(function(e){
if(e.keyCode==38||e.keyCode==40) {
    var prev = $('.chosen').prev();
    var next = $('.chosen').next();

    if(e.keyCode==38){
        $('.chosen').removeClass('chosen'); prev.addClass('chosen');
    }    
    if(e.keyCode==40){
        $('.chosen').removeClass('chosen'); next.addClass('chosen');
    }  

    var timeoutID = null;    

    clearTimeout(timeoutID);
    timeoutID = setTimeout(function() {alert('3 secs secret character!')}, 3e3);


    $('#secret-character').html('Secret Character:'+$('.chosen').html()+'!');                             
}
});

感谢任何帮助。这是 fiddle :http://jsfiddle.net/58MJ3/

Answer 1

每次运行 keydown 处理程序时，您都会将本地变量 timeoutID 设置为 null:

var timeoutID = null;    

然后清除空计时器并启动一个新计时器:

timeoutID = setTimeout(function() {alert('3 secs secret character!')}, 3e3);

但是当回调完成执行时，timeoutID 就会消失，因为 timeoutID 是一个局部变量。

我认为您想清除上一个计时器，因此需要在调用处理程序之间保留timeoutID。也许你想要这个:

var timeoutID = null;
$(document).keydown(function(e) {
    // As before except no `var timeoutID = null` in here...
});

演示:http://jsfiddle.net/ambiguous/AjaAb/