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（）的多个实例？

回答

相关问题