Question

所以我有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/

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/

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

1 个答案: