javascriptはsetTimeout（）の複数のインスタンスを処理しますか？

私は2つのボタン、表示時間、停止時間を持っています。表示時間をクリックすると、現在の時刻を更新するためにsetTimeout（）が設定されます。停止時間がクリックされたら、5秒後にその時間を止めたい。私が抱えている問題は、ショータイムを2回クリックすると、ストップタイムをクリックすると、時間が刻々と変わることです。私は時間を止めるために2回の停止時間をクリックする必要があります。だから私はsetTimeout（）の複数のインスタンスが私は複数の時間を表示時間をクリックすると思う。私はどのように1つの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

@Joysonと@Ayanが言ったようにあなたは

二回開始時間にユーザーがクリックする場合には新しいタイマーを開始する前に

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

を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（）の複数のインスタンスを処理しますか？

答えて

関連する問題