uniapp 定时器如何使用

在uniapp中如何使用定时器？我想实现一个倒计时功能，但不太清楚如何在uniapp中正确使用setInterval或setTimeout。另外，在页面销毁时是否需要手动清除定时器？求具体代码示例和注意事项。

2 回复

在uniapp中，使用setTimeout和setInterval设置定时器，用法与浏览器一致。例如：

// 一次性定时器
setTimeout(() => {
  console.log('执行一次')
}, 1000)

// 循环定时器
let timer = setInterval(() => {
  console.log('重复执行')
}, 1000)

// 记得在页面销毁时清除
onUnload() {
  clearInterval(timer)
}

注意在组件销毁时清理定时器，避免内存泄漏。


在 UniApp 中使用定时器与标准 JavaScript 类似，主要通过 setTimeout 和 setInterval 实现。以下是具体用法：

1. setTimeout（单次定时器）

  • 用于在指定延迟后执行一次函数。
  • 示例代码：
    // 3秒后执行
setTimeout(() => {
  console.log('定时器执行了');
}, 3000);

2. setInterval（重复定时器）

  • 用于每隔固定时间重复执行函数。
  • 示例代码：
    let timer = null;

// 开始定时器：每隔1秒执行
timer = setInterval(() => {
  console.log('重复执行');
}, 1000);

// 清除定时器（在页面卸载或不需要时调用）
// clearInterval(timer);

3. 在 UniApp 生命周期中的注意事项

  • 页面卸载时清除定时器：避免内存泄漏，在 onUnload 中清理：
    onUnload() {
  if (this.timer) {
    clearInterval(this.timer);
    this.timer = null;
  }
}
  • 组件或 Vue 页面中：可将定时器实例保存在 data 中便于管理。

4. 使用场景示例

  • 倒计时功能：
    export default {
  data() {
    return { count: 10, timer: null }
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.count > 0) {
        this.count--;
      } else {
        clearInterval(this.timer);
      }
    }, 1000);
  },
  onUnload() {
    clearInterval(this.timer);
  }
}

注意事项：

  • 定时器返回的 ID 需保存，以便用 clearTimeout 或 clearInterval 清除。
  • 在 H5 或小程序端行为一致，但需注意小程序后台运行时定时器可能被暂停。

通过以上方法，可灵活实现 UniApp 中的定时任务。

回到顶部