在我看来本来很简单的东西,让我大吃一惊,有一个这样的需求,进入页面触发定时器,5s后离开页面,该页面中含有一个按钮,点击时也可以离开该页面。
第一次实现思路:在onload中设置该定时器,时间小于等于0时,清除定时器,然后进行页面的跳转,点击按钮时,因为如果只进行跳转页面的操作,跳转页面后会因定时器还在执行,而有一个刷新。
之后我想的是如何在点击的时候清除onload中的定时器,可是无论怎么操作都无法获取到其他生命周期函数中的方法。于是我将定时器干脆直接放入了data中,然后在页面卸载时清除data中的定时器,然后就完美实现了定时器的清楚。
![](https://i-blog.csdnimg.cn/blog_migrate/a3b8447168cd4c3ca3e4c30766534c0d.gif)
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'
})
}
})