如何使這計數3秒

我想讓它計算多少計算步驟PC可以在3秒內使它應該工作basicly這樣的PROGRAMM功能：如何使這計數3秒

var i = 0; 
function count(){ 
    while(the3seconds are not over) 
    { 
    i++; 
    div.innerHTML = i; 
    } 
}

問題是犯規問題是我如何在3秒鐘之後不停止TWO，因爲它在一個循環中變量i在處理過程中沒有顯示。

如何解決這兩件事？

編輯：

var rechenschritte = 0; 
 
var div = document.getElementById("rechenschritte"); 
 
function count(duration) { 
 
    var end = new Date().getTime() + duration; 
 
    
 
    while(new Date().getTime() < end) { 
 
     rechenschritte++; 
 
    } 
 
    div.innerHTML = rechenschritte; 
 
    rechenschritte = 0; 
 
}

<!doctype html> 
 
<html lang="de"> 
 
<head> 
 
     <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 

 
<input type="button" onclick="count(500)" value="Start"/> 
 
<div id="rechenschritte"></div> 
 

 
</body> 
 
</html>

怎麼看呢計數？

來源

2016-10-19 Tim Jansen

向我們展示你到目前爲止的代碼.... – HaukurHaf

如果你想比阻塞函數：

var end = new Date().getTime() + 3000; 
while(new Date().getTime() < end) {}

FIDDLE #1

但是，這將阻止整個UI，如果你想要一個動畫»循環«比：

(function loop (end) { 

     //do stuff 
     if (new Date().getTime() < end) { 
      window.requestAnimationFrame(function(){ 
       loop(end); 
      }); 
     } 

    })(new Date().getTime() + 3000);

FIDDLE #2

如果您比較了vers離子，你可以看到，＃1將

start ... 
many times sleeping 
end ...

和＃2

start... 
1000 
end 
many times the delta

這是要阻止實際上是指。 while循環將盡可能多地運行循環並阻塞線程，而＃2使用定時器，該定時器將盡可能多地呼叫loop，但最多每秒鐘處理60次。

UPDATE

參照註釋：»怎麼看呢計數«如果您正使用方法＃1，比你不會看到過它，因爲：while循環將消耗所有可用的CPU週期和直到時間到了。在這期間，它更新了內部HTML，但由於此循環阻塞了UI，因此瀏覽器沒有機會實際渲染結果，並且最終會顯示結果。換句話說：您無法像CPU一樣快速更新UI。

要查看任何需要使用方法＃2的方法，這種方式不會阻止用戶界面，因爲要求瀏覽器在瀏覽器的呈現週期之間儘可能頻繁地運行回調，這就是爲什麼有最多60幀/秒，因爲這是瀏覽器的最大更新速率。如果您的回撥時間超過1000/60ms，幀速率會相應降低。

如果你想顯示多少個週期的瀏覽器可以在區間運行，則需要一種不同的方法，這可能是一個Web Worker。有了這個，你可以創建第二個線程，它不會干擾UI。其中，您可以計算迭代次數，並在»UI«線程中，可以從工作人員處獲取該值並顯示每個動畫幀。

請不要指出JS是單線程的，當這個線程正在處理任何東西時，UI會掛起並且不會被更新，直到窗口»無響應的腳本......彈出並要求您停止它。

通過下面的代碼，您可能會得到一個接近「真實」迭代次數的計數。它計算固定的幀長度，更新html，並讓瀏覽器進行渲染，同時計算週期已暫停。所以這將比瀏覽器計數更少的週期實際上可以。

function displayCount(duration){ 
    var end = new Date().getTime() + duration, 
     cycles = 0, 
     frame = 1000/30; //30fps 

    (function loop(){ 
     var now = new Date().getTime(), 
      countend = now + frame; 

     while(new Date().getTime() < countend) { 
      cycles++; 
     } 

     //UPDATE HTML here 

     if(now < end) { 
      window.requestAnimationFrame(loop); 
     } 

    })(); 
}

FIDDLE #3

來源

2016-10-19 10:27:11 philipp

你能使也許在codepen或等的例子嗎？ –

謝謝你，我的代碼現在看起來像這樣我的第一篇文章，但如何解決你看到它計數的問題TWO？ –

@TimJansen看看更新... – philipp

如何使這計數3秒

回答

相關問題