在 JavaScript 中尋找經過的時間
- 王林轉載
- 2023-08-26 22:33:08697瀏覽
有時，它需要尋找在 JavaScript 中執行某些操作時所花費的總時間。例如，我們需要找到更新個人資料的使用者所花費的總時間。
此外，可能還有其他類似的用例，我們需要找到特定時間和當前時間之間的差異，從而找到經過的總時間。在這裡，我們將學習在 JavaScript 中尋找所用時間的各種方法。
在 JavaScript 中使用 Date() 物件尋找已使用時間
在 JavaScript 中，我們可以使用 Date() 物件建構函數來取得目前時間。它會傳回自 1970 年 1 月 1 日以來的總毫秒數。
在這裡，我們可以透過兩個日期的總毫秒數之差來獲得兩個日期之間經過的時間。
文法
使用者可以依照下列語法使用 Date() 物件建構子來尋找 JavaScript 中經過的時間。
let startTime = new Date(); let endTime = new Date(); let timeElapsed = endTime - startTime;
在上面的語法中，首先，我們取得了開始時間。之後，我們就採取了結束時間。為了獲得經過的時間，我們採用了開始和結束時間差。
範例 1
在下面的範例中，我們將目前時間儲存在 startTime 變數中。之後，我們呼叫loopThrough()函數。此函數執行循環 6,00,000 次。
函數執行完成後，我們將目前時間儲存在 endTime 變數中。之後，我們計算 endTime 和 startTime 之間的差值來取得執行該函數所花費的總時間。
<html>
<body>
<h3> Using the <i> Date() object </i> to find the time elapsed in JavaScript </h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
function loopThrough() {
for (i = 0; i < 600000; i++) {
//Do nothing
}
}
let startTime = new Date();
loopThrough();
let endTime = new Date();
let timeElapsed = endTime - startTime;
output.innerHTML += "Total time elapsed to loop through 600000 times: " + timeElapsed + " milliseconds.";
</script>
</body>
</html>
範例 2
下面的範例顯示了特定日期和目前時間之間的時間差。之後，我們呼叫 formatDate() 函數將日期格式化為天、小時、分鐘和秒格式。
在formatDate()函數中，我們取得時差作為參數以及總天數、小時數、分鐘數和秒數。在輸出中，使用者可以檢查自 2019 年 12 月 31 日起經過的總時間。
<html>
<body>
<h3> Using the <i> Date() object </i> to find the time elapsed in JavaScript </h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
function formatDate(difference) {
//Arrange the difference of date in days, hours, minutes, and seconds format
let days = Math.floor(difference / (1000 * 60 * 60 * 24));
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
output.innerHTML += "Total time elapsed is: " + days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds.";
}
let start = new Date("December 31, 2020 23:59:59");
let end = new Date();
let difference = end - start;
formatDate(difference);
</script>
</body>
</html>
使用 Console.time() 函數
console.Time() 方法採用標籤作為參數。每當我們使用某個標籤呼叫 console.time() 方法時，它就會開始計算時間。
console.timeEnd() 方法採用與我們作為 console.time() 方法參數傳遞的相同標籤，並列印自呼叫 console.time() 方法以來經過的時間。
文法
使用者可以依照下面的語法使用console.time()函數來找出JavaScript中所使用的總時間。
console.time(label); console.timeEnd(label);
在上面的語法中，console.time() 和 console.timeEnd() 方法採用相同的標籤。
範例 3
在下面的範例中，首先，我們執行 console.time() 方法，同時傳遞「執行時間」標籤作為參數。之後，我們呼叫循環 1,00,000 次。接下來，我們使用相同的標籤呼叫 console.timeEnd() 方法，在控制台中列印經過的總時間。
// use the console.time() function to find the time elapsed
console.time('Execution time');
for (let i = 0; i < 100000; i++) {
// Iterating through the loop
}
console.timeEnd('Execution time');
使用 Performance.now() 方法
使用者可以使用 Performance.now() 方法來取得執行 JavaScript 程式碼時所使用的總時間。它會傳回經過的時間（以毫秒為單位）。
文法
使用者可以按照下面的語法使用 Performance.now() 方法來尋找 JavaScript 中經過的時間。
let startTime = performance.now(); let endTime = performance.now(); let timeElapsed = endTime - startTime;
我們在上述語法中計算了開始時間和結束時間之間的差異。
範例 4
在下面的範例中，我們在 JavaScript 程式碼開始執行時使用了 Performance.now() 方法。之後，我們使用 setTime() 方法將時間設定為 1000 毫秒。
一旦逾時，它將執行回呼函數，該函數將再次呼叫 Performance.now() 方法，並取得 startTime 和 endTime 之間的差值來尋找總運行時間。
<html>
<body>
<h3> Using the <i> performance.now() method </i> to find the time elapsed in JavaScript </h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let startTime = performance.now();
setTimeout(function () {
let endTime = performance.now();
let timeElapsed = endTime - startTime;
output.innerHTML = 'Time elapsed: ' + timeElapsed + ' milliseconds';
}, 1000);
</script>
</body>
</html>
結論
使用者學習了三種在 JavaScript 中尋找所用時間的方法。第一種方法是使用 Date() 物件。第二種方法是使用 console.time() 和 console.timeEnd() 方法，它始終在控制台中列印時間。第三種方法是使用 Performance.now() 方法。
以上是在 JavaScript 中尋找經過的時間的詳細內容。更多資訊請關注PHP中文網其他相關文章！