前言
如果你想直接看实现方案,直接移步最后面。
有时候,需要实现 页面停留时每隔一段时间请求后端接口更新最新数据 ,就比如我现在这个项目,它就需要每隔一段时间进行刷新,以确保数据是最新的:
逻辑图
实现
说白了,在 onShow()
/ onHide()
生命周期函数中注册 定时器 即可。
Page({
/**
* 页面的初始数据
*/
data:
{
realTime: null,//实时数据对象(用于关闭实时刷新方法)
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function()
{
/**
* 防止用户拿不到最新数据(因为页面切换会重新计时)
* 无条件请求一次最新数据
*/
console.log('请求接口:刷新数据(无条件执行)')
/**
* 每隔一段时间请求服务器刷新数据(客户状态)
* 当页面显示时开启定时器(开启实时刷新)
* 每隔1分钟请求刷新一次
* @注意:用户切换后页面会重新计时
*/
this.data.realTime = setInterval(function()
{
// 请求服务器数据
console.log('请求接口:刷新数据')
// 反馈提示
wx.showToast({
title: '数据已更新!'
})
}, 60000)//间隔时间
// 更新数据
this.setData({
realTime:this.data.realTime,//实时数据对象(用于关闭实时刷新方法)
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function()
{
/**
* 当页面隐藏时关闭定时器(关闭实时刷新)
* 切换到其他页面了
*/
clearInterval(this.data.realTime)
},
})