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;  
    	}  
    }
相关推荐
华玥作者17 小时前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang17 小时前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_9160088919 小时前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW1 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468591 天前
uniapp vue3 小程序开发注意事项
uni-app
雪芽蓝域zzs2 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
普通人62 天前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
PedroQue993 天前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
PedroQue994 天前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app
CHB6 天前
别再问uni-app x蒸汽模式是否成熟了,已经有大量App案例上架应用商店了
uni-app