uni-app 中使用定时器和取消定时器

uni-app 中使用定时器和清除定时器

uni-app 中我们应该如何使用定时器呢?在结束后我们该如何让清除定时器? 下面我们就来分享一下吧。

1、 定义一个

复制代码
data(){
    return{
        timer: null
    }
}

2、设置定时器

复制代码
//选择适合需求的定时器
this.timer = setTimeout( () => {
    // 这里添加您的逻辑		
}, 1000)
this.timer = setInterval( () => {
    // 同上			
}, 1000)

3、清除定时器

这里需要注意的是我们页面中使用了定时器,在离开这个页面的时候一定要记得清除,避免出现bug。

  • 一般页面用onUnload

    复制代码
    onUnload() {
    	if(this.timer) {  
    		clearTimeout(this.timer);  
    		this.timer = null;  
    	}  
    }

    tabbar页面用onHide

    复制代码
    onHide() {
    	if(this.timer) {  
    		clearTimeout(this.timer);  
    		this.timer = null;  
    	}  
    }
相关推荐
2501_916007473 小时前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone
小徐_23333 小时前
AI 写 wot-ui 总在猜 API?我们把 Skills、MCP 和 CLI 都配好了
前端·uni-app·ai编程
Liu.7744 小时前
uni-app 组件 uni-easyinput 常见 Bug 及解决方案
uni-app·bug
小徐_233318 小时前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
蜡台18 小时前
uniapp pdf文件预览组件
pdf·uni-app·合同·pdfh5
凡泰AI1 天前
如何借助MCP打通企业APP内部服务:从统一调用到小程序承接
小程序·uni-app·app·mpaas·mcp·小程序容器
华玥作者1 天前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
这是个栗子1 天前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
宠友信息3 天前
消息序号如何保证即时通讯源码聊天记录稳定加载
java·spring boot·redis·python·mysql·uni-app
2501_916008893 天前
苹果上架工具怎么选 不用 Mac 上架 App Store 的几种方案
android·macos·ios·小程序·uni-app·iphone·webview