React中的setTimeout、setInterval的注意事项

wenshi11019 发布于2019-08-20 17:00 / 1609人阅读

摘要：最近功能需求，在用户输入的一个输入框后，毫秒触发事件，解决方案很简单，嘛代码如下看似合情合理，但是呢，完全不好用，不是别的不好用，而且完全不会，而且每个都执行了，这是啥原因呢想了一想，于是又改了一个写法好用了，也是同样的道理，别忘记就好。

最近功能需求，在用户输入的一个输入框后，500毫秒触发事件，解决方案很简单，setTimeout嘛......

代码如下：

class A extends React.Component{
    handleChange(target){
        var that = this;
        if(this.timer){
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(setTimeoutFun(that,target),500);
        
    }
    setTimeoutFun(_self,_target){
        _self.setState({
            xxx:_target.value
        });
        _self.timer = null;
    }
    render(){
        return(
            
        )
    }
    
}

看似合情合理，但是呢，完全不好用，不是别的不好用，而且完全不会clear，而且每个setTimeout都执行了，这是啥原因呢？想了一想，于是又改了一个写法：

class A extends React.Component{
    handleChange(target){
        var that = this;
        if(this.timer){
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(()=>{
            that.setState({
                xxx:target.value
            });
        },500); 
    }
    render(){
        return(
            
        )
    }
    
}

Bingo!!好用了，setInterval也是同样的道理，别忘记clear就好。

解决方法就是不要调用再模块中定义的方法，用匿名函数！！

但是为什么匿名函数就可以，但是在创建的模块中定义的方法就不好用呢？这个原因还在研究，等研究明白了再更新，希望能对大家有帮助！！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83314.html

精读《Function Component 入门》

摘要：比如就是一种，它可以用来管理状态返回的结果是数组，数组的第一项是值，第二项是赋值函数，函数的第一个参数就是默认值，也支持回调函数。而之所以输出还是正确的，原因是的回调函数中，值永远指向最新的值，因此没有逻辑漏洞。 1. 引言如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Com...

Scholer 2019-08-26 13:56 评论0 收藏0
React16性能改善的原理一

摘要：接下来看下伪代码调度算法伪代码原来这段写的匆忙且不好，重新更新了一篇讲调度算法的大概实现性能改善的原理二。问题背景 React16 更新了底层架构，新架构主要解决更新节点过多时，页码卡顿的问题。譬如如下代码，根据用户输入的文字生成10000行数据，用户输入框会出现卡顿现象。 class App extends React.Component { constructor( prop...

zhangqh 2019-08-23 15:21 评论0 收藏0
个人常用JavaScript及React常用优化总结

摘要：插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合，它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作，有时是会产生视觉变化...

yuanxin 2019-08-20 15:07 评论0 收藏0
理解 React Hooks 的 Capture Value 特性

摘要：在读了一些文章后，大致是找到自己总是掉坑的原因了没理解中的特性。通过这个示例，相信会比较容易地理解特性，并如何使用来暂时绕过它。在知道并理解这个特性后，有助于进一步熟悉了的运行机制，减少掉坑的次数。由于刚使用 React hooks 不久，对它的脾气还拿捏不准，掉了很多次坑；这里的坑的意思并不是说 React hooks 的设计有问题，而是我在使用的时候，因为还没有跟上它的理念导...

curlyCheng 2019-08-26 13:38 评论0 收藏0
VUE使用中踩过的坑

摘要：前言如今可谓是一匹黑马数已居第一位前端开发对于的使用已经越来越多，它的优点就不做介绍了本篇是我对使用过程中以及对一些社区朋友提问我的问题中做的一些总结帮助大家踩坑。随后的重新渲染，元素组件及其所有的子节点将被视为静态内容并跳过。前言 vue如今可谓是一匹黑马,github star数已居第一位！前端开发对于vue的使用已经越来越多，它的优点就不做介绍了,本篇是我对vue使用过程中以及...

big_cat 2019-08-22 14:04 评论0 收藏0