小程序开发之定时器的清楚

在我看来本来很简单的东西，让我大吃一惊，有一个这样的需求，进入页面触发定时器，5s后离开页面，该页面中含有一个按钮，点击时也可以离开该页面。

第一次实现思路：在onload中设置该定时器，时间小于等于0时，清除定时器，然后进行页面的跳转，点击按钮时，因为如果只进行跳转页面的操作，跳转页面后会因定时器还在执行，而有一个刷新。

之后我想的是如何在点击的时候清除onload中的定时器，可是无论怎么操作都无法获取到其他生命周期函数中的方法。于是我将定时器干脆直接放入了data中，然后在页面卸载时清除data中的定时器，然后就完美实现了定时器的清楚。

Page({
 
    /**
    * 页面的初始数据
    */
    data: {
        second: 5,
        time: "",
    },
    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    },
    time: function () {
        var _this = this;
        var s = _this.data.second;
        _this.setData({
            time: setInterval(() => {
                s--;
                if (s <= 0) {
                    clearInterval(_this.data.time);
                    wx.reLaunch({
                   url: '/pages/home/index',
                    })
                } else {
                    this.setData({
                        second: s
                    })
                }
            }, 1000)
        })
    },
    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {
        this.time();
    },
 
    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function () {
    },
    
    /**
    * 生命周期函数--监听页面隐藏
    */
    onHide: function () {
    },
 
    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function () {
        console.log("页面已经进行跳转")
        clearInterval(this.data.time);
    },
    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function () {
    },
    click: function(){
        wx.reLaunch({
            url: '/pages/home/index'
        })
        }
 })

小程序开发之定时器的清楚

相关推荐