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

Answer 2

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

要根据需要使用slideUpTimer，您需要将其置于全局范围内。

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

然后用

分配

slideUpTimer = setTimeout()...

注意分配时缺少var。

Answer 3

您应该在功能之外声明slideUpTimer。让它全球化。

当函数被多次调用时，clearTimeout

3 个答案: