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)

}

react中settimeout_react 中使用setTimeout相关推荐

react中settimeout_react 中运用setTimeout
React中运用setTimeout setTimeout做轮询 React由因而在内存中运转,所以即使是DOM对象已被销毁了,如果在组件卸载(componentWillUnmount)的时刻没有清晰 ...
react中使用scss_我如何将CSS模块和SCSS集成到我的React应用程序中
react中使用scss by Max Goh 由Max Goh 我如何将CSS模块和SCSS集成到我的React应用程序中 (How I integrated CSS Modules with SC ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
javascript中for循环和setTimeout同时使用，出现的问题
javascript中for循环和setTimeout同时使用,出现的问题 for循环代码 <!DOCTYPE html> <html lang="en"> ...
React项目开发中的数据管理
原文链接:https://blog.csdn.net/hl582567508/article/details/76982756 redux中文文档:http://cn.redux.js.org/ Re ...
react 交互_如何在React应用程序中跟踪用户交互
react 交互 by Faouzi Oudouh 通过Faouzi Oudouh 如何在React应用程序中跟踪用户交互 (How to track user interactions in you ...
[react] 在构造函数中调用super(props)的目的是什么？
[react] 在构造函数中调用super(props)的目的是什么? 这是ES6的语法.class组件继承自React.Component,super(props)之后,有以下几个作用: 初始化pr ...
[react] React的render中可以写{if else}这样的判断吗？
[react] React的render中可以写{if else}这样的判断吗? 不可以,可以用三元运算符或者与运算符操作个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
[react] 在JSX中如何写注释？
[react] 在JSX中如何写注释? {/* A JSX comment */} 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起 ...

react中settimeout_react 中使用setTimeout

react中settimeout_react 中使用setTimeout相关推荐

最新文章

热门文章