js定时器的使用方法

在 JavaScript 中，定时器主要有两种：setTimeout和setInterval。

一、setTimeout的使用方法

setTimeout用于在指定的毫秒数后执行一次函数。

以下是一个在 Vue 项目中的示例，实现页面全局变量存储定时器 ID：

<template>
  <div>
    <button @click="startTimeout">Start Timeout</button>
    <button @click="clearTimeoutId">Clear Timeout</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeoutId: null // 存储定时器 ID，作为全局变量在组件内使用
    };
  },
  methods: {
    startTimeout() {
      // 设置一个定时器，3 秒后执行指定函数
      this.timeoutId = setTimeout(() => {
        console.log('Timeout completed.');
      }, 3000);
    },
    clearTimeoutId() {
      // 清除定时器
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
        this.timeoutId = null;
        console.log('Timeout cleared.');
      }
    }
  }
};
</script>

在这个例子中，timeoutId作为页面全局变量（在组件范围内相对全局）存储定时器的 ID。当点击 “Start Timeout” 按钮时，启动定时器并将定时器 ID 存储在timeoutId中。当点击 “Clear Timeout” 按钮时，检查timeoutId是否有值，如果有则使用clearTimeout清除定时器，并将timeoutId重置为null。

二、setInterval的使用方法

setInterval用于按照指定的时间间隔重复执行函数。

以下是一个类似的示例：

<template>
  <div>
    <button @click="startInterval">Start Interval</button>
    <button @click="clearIntervalId">Clear Interval</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      intervalId: null // 存储定时器 ID
    };
  },
  methods: {
    startInterval() {
      // 设置一个定时器，每 2 秒执行一次指定函数
      this.intervalId = setInterval(() => {
        console.log('Interval tick.');
      }, 2000);
    },
    clearIntervalId() {
      // 清除定时器
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
        console.log('Interval cleared.');
      }
    }
  }
};
</script>

在这个例子中，intervalId作为页面全局变量存储定时器的 ID。当点击 “Start Interval” 按钮时，启动定时器并将定时器 ID 存储在intervalId中。当点击 “Clear Interval” 按钮时，检查intervalId是否有值，如果有则使用clearInterval清除定时器，并将intervalId重置为null。