react中settimeout_react 中运用setTimeout

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)

}