博客

jQuery event.timeStamp属性

  • Post category:jquery

jQuery event.timeStamp属性返回事件被触发时的时间戳，以毫秒为单位。该属性通常用于测量事件处理程序的执行时间。

以下是jQuery event.timeStamp属性的详细攻略：

语法

event.timeStamp

参数

无

示例1：测量事件处理程序的执行时间

以下示例演示了如何使用jQuery event.timeStamp属性测量事件处理程序的执行时间：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.timeStamp Property</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $('#myButton').on('click', function(event) {
      var startTime = event.timeStamp;
      // 执行一些操作
      var endTime = event.timeStamp;
      var elapsedTime = endTime - startTime;
      alert('Elapsed time: ' + elapsedTime + 'ms');
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个按钮，并在按钮上绑定了一个click事件在事件处理程序中，我们使用jQuery event.timeStamp属性测量了事件处理程序的执行时间，并弹出了一个提示框，显示执行时间。

示例2：比较事件处理程序的执行时间

以下示例演示了如何使用jQuery event.timeStamp属性比较两个事件处理程序的执行时间：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.timeStamp Property</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    var startTime;

    $('#myButton').on('click', function(event) {
      if (!startTime) {
        startTime = event.timeStamp;
        alert('First click');
      } else {
        var endTime = event.timeStamp;
        var elapsedTime = endTime - startTime;
        alert('Elapsed time: ' + elapsedTime + 'ms');
      }
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个按钮，并在按钮上绑定了一个click事件。在事件处理程序中，我们使用jQuery event.timeStamp属性比较了两个事件处理程序的执行时间，并弹出了一个提示框，显示执行时间。第一次单击按钮时，我们记录了开始时间，并弹出了一个提示框，显示“First click”。第二次单击按钮时，我们记录了结束时间，并计算了执行时间。

注意事项

  • jQuery event.timeStamp属性返回的时间戳是相对于文档加载时间的毫秒数。
  • jQuery event.timeStamp属性只能在事件处理程序中使用。
Tags: