延迟部分函数执行JavaScript并退出函数

Question

所以我正在为餐厅制作程序。单击 table 时，它被标记为 "Paying"，再次单击时，它被标记为 "leaving the restaurant"。我需要的是设置一个间隔，直到删除离开的 table，以防你误点击 table。所以这个想法是，当您单击 "Paying" table 将其标记为 "leaving" 时，它会变成灰色 10 秒，直到它从视图中删除，但是如果您再次单击灰色table 然后你可以恢复那个 table 以防你误点击它。

我遇到的问题是，当我恢复 "leaving" table 时，它会在 10 秒内被删除，无论如何颜色和状态已经改变，我想取消以下操作，如果"leaving" table 已恢复。这里有我正在使用的代码。

请注意，将其标记为 "leaving" 的函数称为 moveToFinished(orderId)。标记为 "Paying" 的是黄色。

function moveToFinished(orderId) {
    var id = "btn"+orderId;
if (document.contains(document.getElementById(id))) {
    var btn = document.getElementById(id);
    btn.classList.remove("yellow");
    btn.classList.add("grey");
    btn.addEventListener('click', function(){
    /*Here if it is clicked to restore it, I want this funcion to end right
      after calling updateStatusToPaying(orderId);*/
      updateStatusToPaying(orderId);
      return;
    });

    setTimeout(function(){ 
    /*Otherwise, in 10 seconds I want to execute this, so the table is 
      removed.*/
            console.log("10 seconds until " + id + " is deleted.")
            document.getElementById("tableNumbersDiv").removeChild(btn);
    }, 10000);    
 }
}

Answer 1

您需要存储 setTimeout 返回的超时 ID 并使用它来取消超时。

function moveToFinished(orderId) {
    var id = "btn" + orderId;

    if (document.contains(document.getElementById(id))) {
        var btn = document.getElementById(id);
        btn.classList.remove("yellow");
        btn.classList.add("grey");
        btn.addEventListener('click', function(){
            /*Here if it is clicked to restore it, I want this funcion to end right
            after calling updateStatusToPaying(orderId);*/
            if (window.isRemoving) {
                clearTimeout(window.isRemoving);
            }
            updateStatusToPaying(orderId);
            return;
        });

        window.isRemoving = setTimeout(function(){ 
            /*Otherwise, in 10 seconds I want to execute this, so the table is 
            removed.*/
            console.log("10 seconds until " + id + " is deleted.")
            document.getElementById("tableNumbersDiv").removeChild(btn);
        }, 10000);
    }
}

Answer 2

您应该将 setTimeout 分配给一个变量，然后在用户恢复后 table - 使用 clearTimeout 全局函数并将您的变量作为参数：

var timeout = setTimeout(function(){}, 10000);
clearTimeout(timeout);

延迟部分函数执行JavaScript并退出函数

Delay part of the funcion execution JavaScript and exit function

javascript

function

timer

delay

exit