react 中使用setTimeout

zhoutao 發(fā)布于2019-08-20 18:19 / 2823人閱讀

摘要：中使用做輪詢由于是在內(nèi)存中運(yùn)行，所以即使是對象已經(jīng)被銷毀了，如果在組件卸載的時候沒有清楚掉定時器，做循環(huán)還是會在內(nèi)存中一直運(yùn)行是指向定時器的指針每次執(zhí)行都需要更新這個指針只有在表格數(shù)據(jù)返回之后才能再請求數(shù)據(jù)目標(biāo)使用獲取數(shù)據(jù)請求數(shù)據(jù)的方法如果

React中使用setTimeout

setTimeout做輪詢

React由于是在內(nèi)存中運(yùn)行，所以即使是DOM對象已經(jīng)被銷毀了，如果在組件卸載(componentWillUnmount)的時候沒有清楚掉定時器， setTimeout做循環(huán)還是會在內(nèi)存中一直運(yùn)行

    componentWillUnmount() {
        this.state.brush && clearTimeout(this.state.brush)
    }

2.this.state.brush是指向定時器的指針每次 setTimeout執(zhí)行都需要更新這個指針

    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})
        // 只有在表格數(shù)據(jù)返回之后才能再請求數(shù)據(jù)
        this.state.tableLoading || this.getPageData({...formdata}, true)
    }

目標(biāo)

使用setTimeout獲取數(shù)據(jù)

請求數(shù)據(jù)的方法

getPageData = (formdata, brushing) => {
        // brushing 如果是自動輪詢獲取數(shù)據(jù)則brushing值為true 避免請求數(shù)據(jù)陷入死循環(huán) 這一步只能有submint事件觸發(fā) 因?yàn)橐卤韱沃?        if (this.state.brushtime && !brushing) {
            // 保存表單值 以便setTImeout的回調(diào)函數(shù)(其實(shí)也就是getPageData)能取得請求數(shù)據(jù)時的參數(shù)
            formdata && this.setState({wfid: formdata.wfid, time: formdata.begintime});
            this.brushData(this.state.brushtime);
        } else {
            this.setState({tableLoading: true})
            if (!formdata) {
                // 初次加載
            } else {
                // 緩存當(dāng)前頁面選擇的時間
            }
        }
    }

循環(huán)的方法

// brushData是回調(diào)函數(shù) 所以參數(shù)只能在當(dāng)前作用域中取得
brushData = (time = this.state.brushtime) => {
        var brush = setTimeout(this.brushData, time * 5 * 1000);
        this.setState({brush})
        // 只有在表格數(shù)據(jù)返回之后才能再請求數(shù)據(jù)  并且在刷新頁面數(shù)據(jù)的時候表單值傳入null使請求數(shù)據(jù)的函數(shù)直接從state中取相應(yīng)的表單值
        this.state.tableLoading || this.getPageData(null, true)
    }