uni-app 中清除定时器实现方法详解

 更新时间:2023年07月10日 11:21:23   作者:瑟闻风倾  
这篇文章主要为大家介绍了uni-app 中清除定时器实现方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

uni-app 中清除定时器

JS之延时器和定时器

注意

无论是获取短信码,还是在活动页轮询获取当前活动最新信息,都需要用到定时器。但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况。

uni-app 中在某个页面中启动定时器后,一定要在页面关闭时将定时器清除掉。即在页面卸载(关闭)的生命周期函数里,清除定时器。

参考方法

定时器的方法

定时器一般有两个

1)setTimeout();//n毫秒后执行一次

2)setInterval();//每隔n秒执行一次

这两个方法都有个返回值,返回一个定时器id,可以定义一个变量接收

清除定时器方法

setTimeout()对应的是 clearTimeout(id);

setInterval()对应的是 clearInterval(id);

例如:

  var time = setInterval("lunRight()",3000);//自动轮播
  box.onmouseover=function(){
    clearInterval(time);
}//鼠标移入轮播图时取消自动轮播
   var i = setTimeout(function(){
   },1000); //setTimeout 1000ms后执行1次
    clearTimeout(i); //清除Timeout的定时器,传入id(创建定时器时会返回一个id)

若没有加判断条件和将timer = null,会导致页面卸载的时候无法清空定时器。

onUnload:function(){  
    if(this.timer) {  //在页面卸载时清除定时器有时会清除不了,可在页面跳转时清除
        clearInterval(this.timer);  
        this.timer = null;  
    }  
}

优化:清除时机(在页面卸载时清除定时器有时会清除不了,可在页面跳转时清除)

clearMyTimer:function(){
    if(timer) {
        console.log("check-清除定时器"); 
        clearInterval(timer);  
        timer = null;  
    }
},
logout:function(){
    _self.sendRequest({
        url : "user/logout",
        data : {
            mobile : _self.userPhone
        },
        success:function(res){
            _self.clearSession();//清空token
            _self.clearMyTimer();//清除定时器
            uni.reLaunch({
                url: "/pages/login2/login2"
            })
        },
        fail:function(e){},
        complete:function(){}
    })
},

以上就是uni-app 中清除定时器的详细内容,更多关于uni-app 清除定时器的资料请关注脚本之家其它相关文章!

相关文章

  • ES6中export default和export之间的区别详解

    ES6中export default和export之间的区别详解

    export和export default都是es6语法中用来导出组件的,可以导出的文档类型有( 数据、常量、函数、js文件、模块等),下面这篇文章主要给大家介绍了关于ES6中export default和export之间的区别的相关资料,需要的朋友可以参考下
    2023-04-04
  • js限制input只能输入有效的数字(第一个不能是小数点)

    js限制input只能输入有效的数字(第一个不能是小数点)

    有时候我们需要限制input只能输入有效的数字,有且只有一个小数点,第一个不能为小数点,那么就可以参考下面的函数来实现
    2018-09-09
  • 配置Webpack SourceMap 实践教程

    配置Webpack SourceMap 实践教程

    这篇文章主要介绍了如何配置Webpack SourceMap,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • javascript 得到变量类型的函数

    javascript 得到变量类型的函数

    在JavaScript中,有时需要准确知道一个变量的类型,显然typeof函数不能满足这个要求,这个函数在大多数情况下都返回object。
    2010-05-05
  • js相册效果代码(点击创建即可)

    js相册效果代码(点击创建即可)

    利用js 书写的相册代码,点击创建即可看到效果,感兴趣的朋友可以参考下哈,希望对你学习jquery有所帮助
    2013-04-04
  • js事件驱动机制 浏览器兼容处理方法

    js事件驱动机制 浏览器兼容处理方法

    下面小编就为大家带来一篇js事件驱动机制 浏览器兼容处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 微信小程序获取用户openid的图文教程(含源码)

    微信小程序获取用户openid的图文教程(含源码)

    微信小程序的开发过程中,有时前端需要获取到openId来使用,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 微信小程序实现电影App导航和轮播

    微信小程序实现电影App导航和轮播

    这篇文章主要为大家详细介绍了微信小程序实现电影App导航和轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • sencha touch 模仿tabpanel导航栏TabBar的实例代码

    sencha touch 模仿tabpanel导航栏TabBar的实例代码

    这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下
    2013-10-10
  • 兼容浏览器的js事件绑定函数(详解)

    兼容浏览器的js事件绑定函数(详解)

    下面小编就为大家带来一篇兼容浏览器的js事件绑定函数(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论