微信小程序中清除定时器

时间: 2019-02-16阅读: 3623标签: 小程序

在微信小程序的开发过程中,经常会遇到使用倒计时的情况,但是小程序的页面跳转经常会遇到跳转的下一个页面后,前一个页面的倒计时还在运行。这时候需要我们在关闭或者离开当前页面的时候清除掉当前的倒计时,但是传统的方式在小程序中无法使用,在小程序中我采用的是赋值然后清除的方法。


传统的方式: 

var myvar = setInterval(function(){ myTimer() }, 1000);
 
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerhtml = t;
}
 
function myStopFunction() {
    clearInterval(myVar);
}


在小程序中:  

Page{
    data={
        myTime:null,
    }
    onUnload () {
     clearInterval(this.myTime);
    }
    _formatSeconds () {//倒计时初始化;
      let i = 0, that = this ,orignalTime = parseInt(this.timeout)
      clearInterval(this.myTime);
      this.myTime = setInterval(() => {
        let theTime = parseInt(that.timeout), // 秒let
          theTime1 = 0, // 分let
          theTime2 = 0, // 小时
          theTime3 = 0,//天
          result
        theTime = theTime - i
        orignalTime = theTime        
        if (theTime > 60) {
          theTime1 = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
          if (theTime1 >= 60) {
            theTime2 = parseInt(theTime1 / 60)
            theTime1 = parseInt(theTime1 % 60)
            if (theTime2 >= 24) {
              theTime3 = parseInt(theTime2 / 24)
              theTime2 = parseInt(theTime2 % 24)
              theTime1 = parseInt(theTime1 % (60 * 24))
            }
          }
        }
        result = ('00' + theTime).substr(-2)//秒
        if (theTime1 > 0) {
          result = `${('00' + theTime1).substr(-2)}:${result}`//秒+分
        } else {
          result = `00:${result}`
        }
        if (theTime2 > 0) {//秒+分+小时
          result = `${('00' + theTime2).substr(-2)}:${result}`
        } else {
          result = `00:${result}`
        }
 
        if (theTime3 > 0) {//秒+分+小时+天数
          result = `${('00' + theTime3).substr(-2) + '天'}:${result}`
        } else {
          result = `${result}`
        }
        if (orignalTime <= 0) {
          that.initData(this.productId, this.skuId)
        }
        i++
        that.timeText = result
        that.$apply()
      }, 1000);  
      this.$apply()    
    }
}


函数内部通过已经定义的变量将倒计时函数赋给变量,然后通过onUnload函数清理,来实现清除倒计时的目的

注意,某些需求下,不仅要在onUnload中清除倒计时,在onHide函数中也需要清除,要根据具体需求来实现。(以上代码是在wepy的框架中写作的,如果在小程序原生代码中使用,需要做适当修改)

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2040

关闭

微信小程序WXS之谜

微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

mpvue开发微信小程序基础知识

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。

微信小程序适配 iPhone 11/Pro

由于目前 iPhone 发售的新机型,iPhone X / iPhone 11 系列,都是刘海屏。因此在小程序设计中,我们经常需要考虑到底部的适配。常规的我们是通过获取系统信息模块来获取的。

小程序返回上一个页面并更新上一个页面的数据

小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据。

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

小程序如何改变onLoad 的执行时机?

也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:

优雅解决微信小程序授权登录需要button触发

聊一聊最近的一个项目,这个项目是一个收书、售书的小程序,有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户,但要求无论用户是否授权都皆可使用,但同时也要求部分功能对不授权的用户限制开放。

微信小程序如何实现跳转到其它小程序的功能

微信小程序目前已经支持跳出到其它小程序了。但是前提是2个小程序必须被同一个公众号关联,如果没有关联则无法打开,下面就实现小程序之间相互跳转的步骤。

把微信小程序异步API为Promise,简化异步编程

把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便,谁用谁知道。微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多.

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!