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

Answer 2

您應該在您的功能之外聲明slideUpTimer。使其成爲全球。

Answer 3

之外，當你使用var slideUpTimer裏面的功能，它只能存在於一個執行的，它不存在。

要使用slideUpTimer只要你願意，你需要把它放在全局範圍內。

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

然後分配時

slideUpTimer = setTimeout()... 

通知缺乏var分配給它。