停止一個jQuery函數

Question

每5秒setTimeout我正在執行一個jQuery函數，我怎麼能通過點擊一個div來停止進程？

我的代碼是：

function crono(selection){ 
    $.ajax({ 
     type: 'GET', 
     url: 'my_page.php', 
     data: { 
      my_page: selection.attr('id') 
     }, 
     success: function(data, textStatus, jqXHR) { 
      selection.html(data); 
     } 
    }); 
} 


function repeat(){ 
    setTimeout(function() { 
     $('.toReload').each(function(){ 
      crono($(this)); 
     }); 
     repeat(); 
    }, 5000); 
} 

repeat(); 

Answer 1

使用clearTimeouthttps://developer.mozilla.org/fr/docs/DOM/window.clearTimeout：

var handle = null; 

function repeat(){ 
    handle = setTimeout(function() { 
     $('.toReload').each(function(){ 
      crono($(this)); 
     }); 
     repeat(); 
    }, 5000); 
} 

，並通過調用取消setTimeout：

clearTimeout(handle); 

Answer 2

使用超時ID。

var timeoutID = 0; 
function repeat(){ 
    timeoutID = setTimeout(function() { 
     $('.toReload').each(function(){ 
      crono($(this)); 
     }); 
     repeat(); 
    }, 5000); 
} 

repeat(); 

//stop the time out 
clearTimeout(timeoutID); 

Answer 3

使用標記來做到這一點。

var end = false; 

function repeat(){ 
    setTimeout(function() { 
     if(!end){ 
      $('.toReload').each(function(){ 
      crono($(this)); 
      }); 
      repeat(); 
     }  
    }, 5000); 
} 
... 

$('#div').click(function(){ 
end = true; 
}); 

Answer 4

使用clearTimeout功能

var timeout; 

function repeat(){ 
    timeout = setTimeout(function() { 
     $('.toReload').each(function(){ 
      crono($(this)); 
     }); 
     repeat(); 
    }, 5000); 
} 

，並在DIV點擊調用下面的函數

function stopAjax(){ 
    clearTimeout(timeout); 
} 

Answer 5

你需要明確的超時和Ajax請求：

var getData = { 
    handleTimeout : 0, 
    handleAjax, 

    crono : function(selection){ 
     $.ajax({ 
      type: 'GET', 
      url: 'my_page.php', 
      data: { 
       my_page: selection.attr('id') 
      }, 
      success: function(data, textStatus, jqXHR) { 
       selection.html(data); 
      } 
     }); 
    }, 

    repeat: function(){ 
     this = ob; 
     this.handleTimeout = setTimeout(function() { 
      $('.toReload').each(function(){ 
       ob.crono($(this)); 
      }); 
      repeat(); 
     }, 5000); 
    }, 

    stopAll: function(){ 
     clearTimeout(this.handleInterval); 
     this.handleAjax.abort(); 
    } 
} 

getData.repeat(); 
getData.stopAll();