当函数被多次调用时，clearTimeout

Question

我有一个警告消息栏，当用户单击特定链接时向下滑动。警报条在指定的时间后向上滑动。如果用户多次点击这个链接，我想重置计时器，将警报条向上滑动，然后再向下滑动(重置计时器)。

$(document).ready(function(){
    $('#main_container').live('click', function(){
        $('.answer_yes').click (function(){

            if ($('#topbar_alert').is(':visible')){
                clearTimeout(slideUpTimer)  
                }
                $('#topbar_alert').slideDown(300);
                $('#topbar_alert_container').empty();
                $('#topbar_alert_container').append('Alert Created!');
                var slideUpTimer = setTimeout(function() {
                    $('#topbar_alert').slideUp(300);
                },8000);
        });
    });
}); 

所以除了clearartimeout部分，其他都可以工作。如果单击链接，警报栏将向下滑动，然后在setTimeout结束后向上滑动。但如果你多次点击链接，它不会重置警报栏。

Answer 1

您应该在当前作用域之外定义var slideUpTimer

var slideUpTimer;
$('#main_container').live('click', function(){
    $('.answer_yes').click (function(){
        if ($('#topbar_alert').is(':visible')){
            clearTimeout(slideUpTimer)  
        }
        $('#topbar_alert').slideDown(300);
        $('#topbar_alert_container').empty();
        $('#topbar_alert_container').append('Alert Created!');
        slideUpTimer = setTimeout(function() {
            $('#topbar_alert').slideUp(300);
        },8000);
    });
});

Answer 2

当你在函数中使用var slideUpTimer时，它只存在于那一次执行中，它不持久

如果你想使用slideUpTimer，你需要把它放在全局作用域中。

var slideUpTimer;
$(document).ready....

然后赋值给

slideUpTimer = setTimeout()...

注意分配时缺少var

Answer 3

应该在函数外部声明slideUpTimer。