uni-app 差量编译后，setTimeout函数仍然生效

uni-app 差量编译后，setTimeout函数仍然生效

操作步骤：

refreshData(){ console.log(111) setTimeout(() => {this.refreshData()}, 10000) }


### 预期结果：

编译后停止执行setTimeout

实际结果：

没有停止


### bug描述：

我有一个需要循环执行的函数  

refreshData(){
console.log(111)
setTimeout(() => {this.refreshData()}, 10000)
}

在调试时，差量编译并没有中断编译前setTimeout的执行  
在每次差量编译后，控制台仍然在循环运行编译前的函数，打印 111

更多关于uni-app 差量编译后，setTimeout函数仍然生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 差量编译后，setTimeout函数仍然生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


差量编译后setTimeout仍然生效是正常现象，因为setTimeout是浏览器/JavaScript运行时的功能，与uni-app的编译过程相互独立。

原因分析：

  1. 运行时与编译分离：setTimeout是JavaScript运行时环境的功能，一旦执行就会在浏览器的定时器队列中注册回调函数。uni-app的差量编译只更新页面代码，不会清除已注册的定时器。
  2. 作用域未销毁：差量编译后，虽然页面组件可能被重新渲染，但JavaScript运行环境中的定时器引用依然存在，除非组件实例被完全销毁。
  3. 热重载机制：uni-app的热重载（差量编译）主要替换模块代码，但不会重置页面状态或清理副作用。

解决方案： 在组件销毁前手动清理定时器：

export default {
  data() {
    return {
      timer: null
    }
  },
  methods: {
    refreshData() {
      console.log(111)
      this.timer = setTimeout(() => {
        this.refreshData()
      }, 10000)
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  }
}
回到顶部