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;  
    	}  
    }
相关推荐
宠友信息1 小时前
Redis 内容社区源码架构优化与即时通讯数据一致性处理
spring boot·后端·websocket·mysql·uni-app
CHB16 小时前
uni-app x 蒸汽模式 iOS版 性能测试基准报告 Benchmark
ios·uni-app·swiftui
衍生星球16 小时前
SpringBoot3 + Vue3 + 微信小程序如何学习,以及学哪些技术,组件
sql·微信小程序·uni-app·vue·springboot
编程猪猪侠2 天前
UniAppx安卓app实现左侧导航与右侧内容联动滚动
android·uni-app
千逐682 天前
Uniapp 鸿蒙实战之 AtomGit APP - 仓库详情与文件树浏览
服务器·microsoft·uni-app
万物得其道者成2 天前
uni-app App 热更新实现指南:从接口检查到下载安装重启(附带AI提示词)
uni-app
anyup2 天前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
千逐682 天前
Uniapp 鸿蒙实战之 AtomGit APP - 首页设计与仓库列表实现
华为·uni-app·harmonyos
天丁o3 天前
Spring Boot + uni-app 智慧考勤闭环 Demo:打卡记录、异常状态和日统计如何复用到企业系统
spring boot·uni-app·mybatis plus·企业管理系统·考勤系统
这是个栗子3 天前
uni-app 微信小程序开发:常用事件指令(@xxx)(一)
微信小程序·小程序·uni-app