2016-08-03 3 views
0

У меня есть две кнопки, время показа и время остановки. когда вы нажимаете на время показа, он устанавливает 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> 

ответ

0

Вы можете очистить 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; 
      if(iTimeout) 
      { 
       window.clearTimeout(iTimeout); 
      } 
      iTimeout = window.setTimeout(startTime, 1000); 
     } 
0

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>

0

Как @Joyson и @Ayan сказал, вы можете проверить, установлен ли 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> 

не так ли?