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 清除定时器的资料请关注脚本之家其它相关文章!

相关文章

  • 情人节之礼 js项链效果

    情人节之礼 js项链效果

    情人节马上要到了,为情人节奉献一份礼物哈。。。一定要支持CSS3渲染的浏览器
    2012-02-02
  • 禁用页面部分JavaScript方法的具体实现

    禁用页面部分JavaScript方法的具体实现

    方法重写,重写要禁用的方法,并让它什么也不做,结果证明真的可行,但并不知道是不是一个科学的方法,我拿出来与大家共同讨论一下
    2013-07-07
  • JavaScript代码实现简单计算器

    JavaScript代码实现简单计算器

    这篇文章主要为大家详细介绍了JavaScript代码实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 解决javascript:window.close()在chrome,Firefox下失效的问题

    解决javascript:window.close()在chrome,Firefox下失效的问题

    本篇文章是对javascript:window.close()在chrome,Firefox下失效问题的解决方法进行了分析介绍。需要的朋友参考下
    2013-05-05
  • 深入理解Javascript中的作用域链和闭包

    深入理解Javascript中的作用域链和闭包

    之前我们讲到数组遍历, 本文我们更进一步, 讲讲如何提高遍历的效率. 下面这篇文章主要深入的介绍了Javascript中作用域链和闭包的相关资料,需要的朋友可以参考下
    2017-04-04
  • vue 组件销毁并重置的实现

    vue 组件销毁并重置的实现

    这篇文章主要介绍了vue 组件销毁并重置的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • D3.js实现饼状图的方法详解

    D3.js实现饼状图的方法详解

    相信大家都知道图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和Web应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现饼图的方法,有需要的可以参考借鉴。
    2016-09-09
  • JavaScript冒泡算法原理与实现方法深入理解

    JavaScript冒泡算法原理与实现方法深入理解

    这篇文章主要介绍了JavaScript冒泡算法,结合实例形式详细分析了JavaScript冒泡算法基本原理、实现方法与相关注意事项,需要的朋友可以参考下
    2020-06-06
  • JavaScript可迭代对象详细介绍

    JavaScript可迭代对象详细介绍

    ES6中引入了迭代器与可迭代对象的概念,并且提供了对可迭代对象的相关支持,如for...of循环,Map(iterable)构造器,展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
    2022-06-06
  • 使用json-server简单完成CRUD模拟后台数据的方法

    使用json-server简单完成CRUD模拟后台数据的方法

    这篇文章主要介绍了使用json-server简单完成CRUD模拟后台数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论