React中运用setTimeout
setTimeout做轮询
React由因而在内存中运转,所以即使是DOM对象已被销毁了,如果在组件卸载(componentWillUnmount)的时刻没有清晰掉定时器, setTimeout做轮回照样会在内存中一直运转
componentWillUnmount() {
this.state.brush && clearTimeout(this.state.brush)
}
2.this.state.brush是指向定时器的指针 每次 setTimeout执行都须要更新这个指针
brushData = (time = this.state.brushtime, formdata = {
wfid: this.state.wfid,
begintime: this.state.time
}) => {
var brush = setTimeout(this.brushData, time * 5 * 1000);
this.setState({brush})
// 只要在表格数据返回以后才再要求数据
this.state.tableLoading || this.getPageData({...formdata}, true)
}
目的
运用setTimeout猎取数据
要求数据的要领
getPageData = (formdata, brushing) => {
// brushing 如果是自动轮询猎取数据则brushing值为true 防止要求数据堕入死轮回 这一步只能有submint事宜触发 由于要更新表单值
if (this.state.brushtime && !brushing) {
// 保留表单值 以便setTImeout的回调函数(实在也就是getPageData)能获得要求数据时的参数
formdata && this.setState({wfid: formdata.wfid, time: formdata.begintime});
this.brushData(this.state.brushtime);
} else {
this.setState({tableLoading: true})
if (!formdata) {
// 首次加载
} else {
// 缓存当前页面挑选的时候
}
}
}
轮回的要领
// brushData是回调函数 所以参数只能在当前作用域中获得
brushData = (time = this.state.brushtime) => {
var brush = setTimeout(this.brushData, time * 5 * 1000);
this.setState({brush})
// 只要在表格数据返回以后才再要求数据 并且在革新页面数据的时刻表单值传入null使要求数据的函数直接从state中取响应的表单值
this.state.tableLoading || this.getPageData(null, true)
}