JavaScript 在调用相同函数之前清除超时

Question

情况:

当用户单击“#test”表的单元格时，它将每 10 秒运行一次“update_func”。

当用户点击同一个单元格/另一个单元格时，另一个“update_func”再次运行，并且每 10 秒运行多个“update_func”。

问题:

我想在新的“update_func”启动之前停止之前正在运行的“update_func”，我应该在哪里使用clearTimeout()函数来避免多个“update_func”继续运行？

我有以下脚本:

$("#test").on("click", td, function() {
        //do something..
        update_func(v1,v2,v3);
});

function update_func(v1,v2,v3){
    $.ajax({
        url:"update.php",
        method:"POST",
        data:{testvalue:v1},
        success:function(data){
            $('#testbox').html(data);
        }
    }).always(function () {
        window.setTimeout(function() { update_func(v1,v2,v3); }, 10000);
    });
}

Answer 1

在外部作用域中保存对超时 ID 的引用，在 always 内为其分配 setTimeout 调用，然后单击时清除超时:

let timeoutId;
$("#test").on("click", td, function() {
        //do something..
        clearTimeout(timeoutId);
        update_func(v1,v2,v3);
});

function update_func(v1,v2,v3){
    $.ajax({
        url:"update.php",
        method:"POST",
        data:{testvalue:v1},
        success:function(data){
            $('#testbox').html(data);
        }
    }).always(function () {
        timeoutId = window.setTimeout(function() { update_func(v1,v2,v3); }, 10000);
    });
}