react 中使用setTimeout

React中使用setTimeout

setTimeout做轮询

1. 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)
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!