所属分类:web前端开发
有时,它需要查找在 JavaScript 中执行某些操作时所花费的总时间。例如,我们需要找到更新个人资料的用户所花费的总时间。
此外,可能还有其他类似的用例,我们需要找到特定时间和当前时间之间的差异,从而找到经过的总时间。在这里,我们将学习在 JavaScript 中查找所用时间的各种方法。
在 JavaScript 中,我们可以使用 Date() 对象构造函数获取当前时间。它返回自 1970 年 1 月 1 日以来的总毫秒数。
在这里,我们可以通过两个日期的总毫秒数之差来获得两个日期之间经过的时间。
用户可以按照以下语法使用 Date() 对象构造函数来查找 JavaScript 中经过的时间。
let startTime = new Date(); let endTime = new Date(); let timeElapsed = endTime - startTime;
在上面的语法中,首先,我们获取了开始时间。之后,我们就采取了结束时间。为了获得经过的时间,我们采用了开始和结束时间差。
在下面的示例中,我们将当前时间存储在 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>
下面的示例显示了特定日期和当前时间之间的时间差。之后,我们调用 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.timeEnd() 方法采用与我们作为 console.time() 方法参数传递的相同标签,并打印自调用 console.time() 方法以来经过的时间。
用户可以按照下面的语法使用console.time()函数来查找JavaScript中所用的总时间。
console.time(label); console.timeEnd(label);
在上面的语法中,console.time() 和 console.timeEnd() 方法采用相同的标签。
在下面的示例中,首先,我们执行 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() 方法来获取执行 JavaScript 代码时所用的总时间。它返回经过的时间(以毫秒为单位)。
用户可以按照下面的语法使用 Performance.now() 方法来查找 JavaScript 中经过的时间。
let startTime = performance.now(); let endTime = performance.now(); let timeElapsed = endTime - startTime;
我们在上述语法中计算了开始时间和结束时间之间的差异。
在下面的示例中,我们在 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() 方法。