在我看来本来很简单的东西,让我大吃一惊,有一个这样的需求,进入页面触发定时器,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' }) } })