今天测试的同学发现了一个bug
这个略萌的bug长这样
这个图片似乎有点大啊
这是一个根据关键字检索的组件，讲道理搜索结果的标题应该包含我的关键字。
但是这！不讲道理啊？要是说跟关键字有啥关系，只能说都包含200了。。没错，这是一个bug。
所以馁，来看看代码咯。
搜索组件
额，好像很多方法，不过只有onChange跟我们有关系。
onChange函数
哇，还有个props.onChange，似乎很复杂。不过作为一个优秀的当代青年，还是要冷静。
管他啥跟啥，跟我们啥关系呢？
（其实这个props.onChange是一个根据关键字向服务器请求数据的）
冷静到这，大概分析出问题了。
每一次用户输入，都去请求服务器数据，比如我现在想输入2000，输入2的时候，请求一个，再输入0的时候，又请求一次。。。类推，总共请求了4次，由于js异步请求存在延迟的原因，当我输入2000的时候，所以屏幕展示了200的数据。
既然找到问题了，就要想办法解决。
简单，利用debounce防抖就可以解决。
老规矩，找个资料先。
《一篇关于Debounce 和 Throttle 的原理及实现的好文》
现在的问题是，动作太急促，每一个动作都执行了函数。
那么就可以用Debounce的思想去解决。
所谓防抖，就是当动作在一定时间段内结束才去执行我们的函数。
右边就是防抖机制
简单解释一下。
首先，定时器timer只有一个（这里是个坑），在200ms内执行debounce函数都会清空定时器，因此this.props.onChange(newValue)并不会执行，只有在200ms这个时间段内不执行debounce函数，才会执行。
然后这里调用一下：
改变一下onChange事件
这样下来，bug解决了。
先这样简单地运用debounce，后续应该会使用别人打包好的库吧，毕竟兼容性啥的比较好。
网友评论