javascript處理setTimeout（）的多個實例？

我有兩個按鈕，顯示時間和停止時間。當點擊顯示時間時，它會設置setTimeout（）來更新當前時間。當停止時間被點擊時，我想停止5秒後的時間。我遇到的問題是，如果我點擊兩次顯示時間，那麼我點擊停止時間，時間到了滴答。我需要點擊兩次停止時間才能停止時間。所以我認爲有多個setTimeout（）實例，當我單擊顯示時間多次。我想知道如何確保只有一個setTimeout（），所以即使顯示時間被多次點擊，它只需要點擊一次停止時間來停止時間。javascript處理setTimeout（）的多個實例？

<body> 
    <script> 
     var iTimeout; 

     function startTime() { 
      var today = new Date(); 
      var hour = today.getHours(); 
      var min = today.getMinutes(); 
      var sec = today.getSeconds(); 
      document.getElementById('time').innerHTML = 
       hour + ":" + min + ":" + sec; 
      iTimeout = window.setTimeout(startTime, 1000); 
     } 

     function stopTimer() { 
      window.setTimeout(function() { 
       window.clearTimeout(iTimeout); 
       console.log("clear"); 
      }, 5000); 
     } 
    </script> 
    </head> 

    <div id="time"></div> 
    <button onclick="stopTimer()">stop time</button> 
    <button onclick="startTime()">show time</button> 

</body>

來源

2016-08-03 SanuoXeu

可以在開始的情況下，用戶點擊開始時間新的計時器兩次

function startTime() { 
      var today = new Date(); 
      var hour = today.getHours(); 
      var min = today.getMinutes(); 
      var sec = today.getSeconds(); 
      document.getElementById('time').innerHTML = 
       hour + ":" + min + ":" + sec; 
      if(iTimeout) 
      { 
       window.clearTimeout(iTimeout); 
      } 
      iTimeout = window.setTimeout(startTime, 1000); 
     }

來源

2016-08-03 05:03:04 Joyson

var iTimeout; 
 

 
function startTime() { 
 
    var today = new Date(); 
 
    var hour = today.getHours(); 
 
    var min = today.getMinutes(); 
 
    var sec = today.getSeconds(); 
 
    document.getElementById('time').innerHTML = 
 
    hour + ":" + min + ":" + sec; 
 
    // clear the timeout if it exists. 
 
    if (iTimeout) { 
 
    window.clearTimeout(iTimeout); 
 
    } 
 
    iTimeout = window.setTimeout(startTime, 1000); 
 
} 
 

 
function stopTimer() { 
 
    window.setTimeout(function() { 
 
    window.clearTimeout(iTimeout); 
 
    console.log("clear"); 
 
    }, 5000); 
 
}

<div id="time"></div> 
 
<button onclick="stopTimer()">stop time</button> 
 
<button onclick="startTime()">show time</button>

來源

2016-08-03 05:04:16 Ayan

由於@Joyson和@Ayan說之前清除iTimeout，您可以檢查iTimeout是否已經設置，並在每次創建新定時器的請求時將其清除。我會做同樣的，但是，如果我必須在特定的延遲後重復調用函數，我會使用setInterval來代替。使代碼清潔。

<script> 
    var iTimeout; 

    function getTime() { 
     var today = new Date(); 
     var hour = today.getHours(); 
     var min = today.getMinutes(); 
     var sec = today.getSeconds(); 
     document.getElementById('time').innerHTML = 
      hour + ":" + min + ":" + sec; 
    } 
    function startTime(){ 
     if(iTimeout) 
      window.clearInterval(iTimeout); 
     iTimeout = window.setInterval(getTime, 1000); 
    } 


    function stopTimer() { 
     window.setTimeout(function() { 
      window.clearInterval(iTimeout); 
      console.log("clear"); 
     }, 5000); 
    } 
</script> 


<div id="time"></div> 
<button onclick="stopTimer()">stop time</button> 
<button onclick="startTime()">show time</button>

不是嗎？

來源

2016-08-03 05:17:39

javascript處理setTimeout（）的多個實例？

回答

相關問題