重置setInterval函數使用jQuery

Question

這裏我的代碼：

$(document).ready(function() { 
    $('#mid_select').live('click', function(e){ 
     $('#middle').load($(this).attr('href') + ' #middle'); 
     var page = $(this).attr("rel"); 
     alert(page); 
     if (page == 'mywall'){ 
      var auto_refresh = setInterval(function() { 
      $('#bottom_middle').load('includes/main_middle_div.php?view=mywall #bottom_middle').fadeIn("slow");}, 5000); 
     } else { 
      clearInterval(auto_refresh);  
     } 
     e.preventDefault(); 
    }); 
}); 

我想要做的是，如果用戶點擊與#mid_select ID和rel屬性，它等於「mywall」的鏈接，然後每5秒刷新一次#bottom_middle格，但如果用戶點擊rel屬性不等於「我的頁面」的鏈接，則不要每5秒刷新一次#bottom_middle格。無法弄清楚如何完成這項工作，幫助任何人？

Answer 1

您必須存儲setInterval的超時時間以外的參考點擊處理程序（使用var）。此外，您必須確保一次最多可以循環一個間隔。調整後的代碼如下所示，符合以下標準：

$(document).ready(function() { 
    var auto_refresh = false; // Store this variable OUTSIDE the click handler 
    $('#mid_select').live('click', function(e){ 
     var $this = $(this); 
     $('#middle').load($this.attr('href') + ' #middle'); 
     var page = $this.attr("rel"); 
     alert(page); 
     if (page == 'mywall'){ 
      // Check whether an instance is already running... 
      if (auto_refresh === false) { 
       // NO var, because we use the auto_refresh var in the parent scope 
       auto_refresh = setInterval(function() { 
      $('#bottom_middle').load('includes/main_middle_div.php?view=mywall #bottom_middle').fadeIn("slow"); 
       }, 5000); 
     } else { 
      // Clear interval, and explicitly set it to true 
      clearInterval(auto_refresh); 
      auto_refresh = false; 
     } 
     e.preventDefault(); 
    }); 
});