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

所以我有3个角色和一个秘密角色。秘密字符应为.chosen字符。到目前为止一切都很好。但是，我试图显示警报，但是仅当秘密字符div中的选定字符过去3秒时。此刻，快速按下按键（机密字符包含所选字符的时间少于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()+'!');
}
});

任何帮助表示赞赏。这是小提琴：http://jsfiddle.net/58MJ3/

最佳答案

每当您的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/