JavaScript 查找经过的时间

有时候，在JavaScript中执行一些操作时，需要找到经过的总时间。示例，我们需要找到从更新个人资料的用户那里经过的总时间。

此外，还可能有其他类似的使用情景，我们需要找到特定时间和当前时间之间的差异，即找到经过的总时间。在这里，我们将学习在JavaScript中查找经过的时间的各种方法。

使用Date()对象在JavaScript中查找经过的时间

在JavaScript中，我们可以使用Date()对象构造函数获取当前时间。它返回自1970年1月1日以来的总毫秒数。

在这里，我们可以取两个日期的总毫秒数之差，以得到两个日期之间经过的时间。

语法

用户可以按照以下语法使用Date()对象构造函数来在JavaScript中查找经过的时间。

let startTime = new Date();
let endTime = new Date();
let timeElapsed = endTime - startTime;

在上面的语法中，首先我们获取了开始时间。然后，我们获取了结束时间。为了得到经过的时间，我们获取了开始时间和结束时间的差距。

示例1

在下面的示例中，我们将当前时间存储在startTime变量中。然后，我们调用loopThrough()函数。该函数将循环执行600,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>