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