javascript - 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);

        });
    });

}); 

所以除 clearTimeout 部分外，一切正常。如果单击该链接，警告栏会向下滑动，然后在 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);
    });
});