uniapp定时器优化
uniapp定时器优化方法
减少定时器数量
使用setInterval或setTimeout时避免创建过多定时器，全局只维护必要的定时器实例。多个组件需要定时更新时，通过事件总线或vuex共享同一个定时器数据。
使用requestAnimationFrame
对于动画类高频更新场景，优先使用requestAnimationFrame替代传统定时器，可获得更流畅的性能表现：
function animate() {
// 动画逻辑
requestAnimationFrame(animate)
}
animate()组件销毁时清除
在组件的beforeDestroy或onUnload生命周期中必须清除定时器，防止内存泄漏：
export default {
data() {
return {
timer: null
}
},
mounted() {
this.timer = setInterval(() => {}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}使用worker线程
对于计算密集型定时任务，可考虑使用Web Worker将任务移至后台线程，避免阻塞UI渲染：
// main.js
const worker = new Worker('worker.js')
worker.postMessage({ cmd: 'start' })
// worker.js
self.addEventListener('message', (e) => {
if (e.data.cmd === 'start') {
setInterval(() => {
// 执行任务
}, 1000)
}
})合理设置时间间隔
根据实际需求调整定时器间隔，非必要情况下避免使用过短的间隔（如小于100ms）。对于数据更新类需求，可结合WebSocket实现服务端推送。
防抖节流控制
高频事件配合防抖(debounce)和节流(throttle)使用，减少不必要的执行：
import { debounce } from 'lodash-es'
export default {
methods: {
handleScroll: debounce(function() {
// 处理逻辑
}, 300)
}
}
