Мигает при обновлении значения очень часто

Я делаю секундомер в Javascript, и я успешно реализовал все функции. Однако, поскольку таймер обновляется каждый раз, каждые 10 миллисекунд, консоль chrome dev показывает, что веб-страница иногда ничего не рисует в поле секундомера, заставляя поле внезапно мигать, когда время появляется снова.Мигает при обновлении значения очень часто

Интересно, как я могу добиться статического секундомера без моргания.

хозяина: http://folk.ntnu.no/nikolahe/assignment8/stopwatch.html

stopwatch.js

window.addEventListener("load", function(e){ 

    var interval; 
    var state = 0; 
    var display = document.getElementById('display-area'); 
    var offset; 
    var clock = 0; 

    function updateTimer() { 
     clock += delta(); 
     var time = format(clock); 
     if (time != "") { 
      display.value = time; 
     } 
    } 

    function format(clock) { 
     var timer = new Date(clock); 
     var currentHours = timer.getHours()-1; 
     var currentMinutes = timer.getMinutes(); 
     var currentSeconds = timer.getSeconds(); 
     var currentMilliseconds = timer.getMilliseconds(); 

     currentHours = (currentHours < 10 ? "0" : "") + currentHours; 
     currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes; 
     currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; 
     currentMilliseconds = (currentMilliseconds < 100 ? "0" : "") + currentMilliseconds; 
     return currentHours + ":" + currentMinutes + ":" + currentSeconds + "." + currentMilliseconds; 
    } 

    function delta() { 
     var now = Date.now(); 
     d = now - offset; 
     offset = now; 
     return d; 
    } 

    function toggle() { 
     console.log(state); 
     if (!interval) { 
      console.log("start"); 
      offset = Date.now(); 
      interval = setInterval(updateTimer, 10); 
     } else { 
      console.log("stop"); 
      clearInterval(interval); 
      interval = null; 
     } 
    } 

    function reset() { 
     if(interval) { 
      toggle(); 
     } 
     display.value = "00:00:00.000" 
     clock = 0; 
    } 

    document.getElementById('toggle-button').addEventListener("click", toggle); 
    document.getElementById('reset-button').addEventListener("click", reset); 
})

stopwatch.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Stopwatch</title> 
     <script src="stopwatch.js"></script> 
     <style> 
      body { text-align: center; margin-top: 200px; font-family: courier;} 
      #display-area { font-size: 20pt; } 
     </style> 
    </head> 
    <body> 
     <div> 
      <output id="display-area">00:00:00.000</output> 
     </div> 
     <div> 
      <button id="toggle-button">Start/Stop</button> 
      <button id="reset-button">Reset</button> 
     </div> 
    </body> 
</html>

источник

2014-10-19 Nikolai Hegelstad

Это работает на последней хром без каких-либо мигает, так что я не могу воссоздать его и может Не скажите, правильно ли это решение, но это может быть решение.

Возможно, это проблема, вызванная самим браузером. Человеческий глаз может видеть только заметные изменения каждые 16 мс, ваш цикл определенно работает за меньшее время. Проблема может быть в том, что браузер не хочет обновлять контент элемента до 16 мс, чем это. Если вы сказали, что он работает примерно каждые 10 мс, у вас будет весь цикл (16 мс) каждые 4, в котором значение не будет отображаться. Это только теория, и я не могу это доказать.

Вместо interval = setInterval(updateTimer, 10);, попробуйте interval-= 16; window.setTimeout(updateTimer, 16), которые должны делать вещи только каждые 16 или более мс

источник

2014-10-19 14:49:34 towc

, если это не правильно, то это, вероятно, что-то связанное – towc

На самом деле я сделал немного больше работы в консоли, и оказалось, мой код не добавлял конечный ноль во всех случаях, например (01, 05), но в (009, 014). Поэтому я добавил код, чтобы вручную добавить к этим случаям нулевой ноль. Отлично! –

безупречный! И спасибо за «правильный ответ», хотя я ничего не сделал XD – towc

Мигает при обновлении значения очень часто

ответ

Смежные вопросы