js定时器的使用方法

在 JavaScript 中,定时器主要有两种:setTimeoutsetInterval

一、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

猜你喜欢

转载自blog.csdn.net/m0_54829066/article/details/142168044