関数実行の遅延部分JavaScriptとexit関数

Question

私はレストランのプログラムを作っています。テーブルをクリックすると「支払う」とマークされ、再度クリックすると「テーブルから離れる」とマークされます。私が必要とするのは、あなたがテーブルを逃した場合に備えて、離脱テーブルが削除されるまでの間隔を設定することです。つまり、「支払う」テーブルをクリックして「離れる」とマークすると、ビューから削除されるまでグレーの色が10秒間表示されますが、再びグレーのテーブルをクリックすると、そのテーブルが復元されますあなたがそれを逃した場合。

問題は、 "leave"テーブルを復元すると、10秒後に色と状態が変更されて削除され、 "leave"テーブルが復元された場合、次の操作をキャンセルしたいということです。ここで私が使用しているコードがあります。

"脱出"としてマークする機能は、moveToFinished（orderId）と呼ばれています。また、「支払う」と記されているものは黄色です。

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); 
    } 
} 

あなたが変数にsetTimeoutメソッドを割り当て、その後、ユーザーの後にテーブルを元に戻す必要があります

Answer 2

- パラメータとして、あなたの変数でてclearTimeoutグローバル関数を使用します。

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