防抖与节流（实例）

防抖

函数防抖（debounce)，就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。

只执行最后一次

• 定时器

  用户名密码输入 接口调用

 

当用户在短时间内，多次点击登陆，发送短信等请求数据的操作时

文本编辑器一段时间不操作，进行自动保存

搜索框进行联想，用户不断输入值，只在停顿1s时才进行联想

 

 

 节流

节流（throttle),当持续触发事件时，保证在一定时间内只调用一次事件处理函数，实际上，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

 

 

 

 

 无限量加载

 防抖函数实例

1.使用echarts时，改变浏览器宽度的时候，希望重新渲染

echarts的图像，可以使用此函数，提升性能。(虽然echarts里有自带的resize函数)

2.典型的案例就是输入搜索:输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

解决搜索的bug

输入2000

出现2002 ，2001（200）