Question

我的功能通过ajax更新内容，并在成功后5秒刷新。如果用户希望在其间进行刷新，则可以单击按钮。

我的问题有时候（当几乎同时触发自动刷新和用户刷新时）clearTimeout无效并且该函数开始运行两次。

var rotate=0;

function refresh(){
    $.ajax({
    ...,
    success : function(data){
        $('#content-to-insert').html(data);
        rotate = setTimeout(refresh, 5000);
        }
    });
}

$('#user-refresh-btn').click(function(){
    clearTimeout(rotate);
    refresh();
});

我该怎么办？非常感谢您的帮助！

Answer 1

如果ajax调用已在进行中，然后用户按下刷新按钮，我会看到一个问题。然后你会得到一个正在进行的ajax调用和一个由刷新按钮启动的新调用。你可以这样解决：

var rotate;
var refreshInProgress = false;

function refresh(){
    refreshInProgress = true;
    $.ajax({
        ...,
        success : function(data){
            refreshInProgress = false;
            $('#content-to-insert').html(data);
            rotate = setTimeout(refresh, 5000);
        }
        complete: function() {
            // catch any other ways the ajax call might finish (such as error)
            refreshInProgress = false;
        }
    });
}

$('#user-refresh-btn').click(function(){
    if (refreshInProgress) return;
    clearTimeout(rotate);
    refresh();
});

Answer 2

clearTimeout不会停止AJAX请求，它只会阻止它被启动。因此，如果用户在运行AJAX请求时单击该按钮，则代码将启动第二个。

使用以下代码，如果您的AJAX请求已在运行，则不会再启动另一个。

var rotate=0,
    running = false;

function refresh(){
    if (running === false){
        running = true;

        $.ajax({
        ...,
        success : function(data){
            running = false;

            $('#content-to-insert').html(data);
            rotate = setTimeout(refresh, 5000);
            }
        });
    }
}

$('#user-refresh-btn').click(function(){
    clearTimeout(rotate);
    refresh();
});

递归函数cleartimeout在特殊情况下不起作用

2 个答案: