jquery - 停止一个 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

使用clearTimeout https://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

使用标志来做到这一点。

var end = false;

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

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

Answer 3

使用超时 ID。

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

repeat();

//stop the time out
clearTimeout(timeoutID);

Answer 4

您需要明确的超时和 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();

Answer 5

使用clearTimeout功能

var timeout;

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

并在 div 点击调用以下函数

function stopAjax(){
    clearTimeout(timeout);
}