값을 자주 업데이트 할 때 깜박임

자바에서 스톱워치를 만들었으므로 모든 기능을 성공적으로 구현했습니다. 그러나 타이머가 매 10 밀리 초마다 업데이트되기 때문에 Chrome 개발자 콘솔에서는 웹 페이지가 스톱워치 필드에 아무 것도 표시하지 않는 것으로 표시되어 다시 시간이 표시되면서 필드가 갑자기 깜박입니다.값을 자주 업데이트 할 때 깜박임

깜박임없는 정적 스톱워치를 어떻게 얻을 수 있는지 궁금합니다.

호스트 : 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

이 어떤 깜박임이없이 최신 크롬에 노력하고, 그래서 그것을 다시 할 수 없습니다 이 해결책이 맞는지는 알 수 없지만 해결책 일 수 있습니다.

브라우저 자체의 문제 일 수 있습니다. 인간의 눈은 16ms마다 눈에 띄는 변화 만 볼 수 있습니다. 루프는 확실히 적은 시간 안에 실행됩니다. 문제는 브라우저가 16ms 이전에 요소의 내용을 업데이트하려고하지 않을 수도 있습니다. 약 10ms마다 실행된다고 말하면 값이 표시되지 않는 매 4 사이클마다 (16ms)주기가 있습니다. 이것은 단지 이론 일 뿐이며 그것을 증명할 수는 없습니다. 대신 interval = setInterval(updateTimer, 10);의

이 정확하지 않은 경우 물건을 매 16 개 이상의 MS

출처

2014-10-19 14:49:34 towc

을해야 interval-= 16; window.setTimeout(updateTimer, 16)을 시도하십시오 아마 – towc

는 사실 내가 콘솔에서 좀 더 일했다 관련된 무언가와 내 코드를 설정 (01, 05), (009, 014)와 같이 모든 경우에 후행 0을 추가하지 않았습니다. 그래서 이러한 경우에 후행 0을 수동으로 추가하는 코드를 추가했습니다. 완벽하게 나타났다! –

완벽! 그리고 '정답'에 대해 고마워. 내가 XD를 해본 건 아니지만. – towc

값을 자주 업데이트 할 때 깜박임

답변

관련 문제