uniapp定时器如何使用

我在uniapp开发中遇到了定时器的问题，想请教一下具体的使用方法。比如：

  1. 如何在uniapp中创建和销毁定时器？
  2. uniapp的定时器和原生JS的setTimeout/setInterval有什么区别？
  3. 在页面跳转或组件销毁时需要注意哪些清理工作？
  4. 有没有性能优化的建议？

希望有经验的朋友能分享下实际使用中的注意事项，最好能提供一些代码示例，谢谢！

2 回复

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

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

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

// 清除定时器
clearInterval(timer)

注意：页面卸载时务必清除定时器，避免内存泄漏。


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

1. setTimeout（单次定时器）

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

2. setInterval（循环定时器）

  • 用于每隔指定时间重复执行函数。
  • 示例代码：
    let timer = setInterval(() => {
  console.log('每隔2秒执行一次');
}, 2000);

3. 清除定时器

  • 使用 clearTimeout 或 clearInterval 停止定时器，避免内存泄漏。
  • 示例代码：
    // 清除 setTimeout
let timeoutId = setTimeout(() => {}, 1000);
clearTimeout(timeoutId);

// 清除 setInterval
let intervalId = setInterval(() => {}, 1000);
clearInterval(intervalId);

注意事项：

  • 在页面或组件销毁时（如 onUnload 生命周期），务必清除定时器：
    onUnload() {
  clearInterval(this.timer);
}
  • 定时器在 UniApp 的 Vue 环境中运行正常，适用于 H5、小程序等平台。

以上方法简单高效，适用于大多数定时任务场景。

回到顶部