js实现防抖(debounce)与节流(throttle)

默默的守护你

防抖(debounce)

一句话概括：防抖是给定一个时间周期，如果触发事件的周期小于该事件（也就是触发过快），则不会触发事件。
举个例子：我给定的时间周期是1s，如果我在触发第一次事件后1s内触发该事件，则重新开始计时，直到触发周期大于1s才会执行事件的方法。

1. function debounce(fn,timeout){
2.     let timer = null
3.     return function(){
4.         clearTimeout(timer)
5.         timer = setTimeout(() => {
6.             fn.apply(window,arguments)
7.         }, timeout);
8.     }
9. }

复制代码

一句话概括：节流是给定一个时间周期，然后对频率大的触发进行削峰，如果触发事件的周期大于该事件（也就是触发过快），则会触发事件的周期限定在给定的周期内，如果小于则按照正常的时间触发。
举个例子：我给定的时间周期是1s，如果我在触发第一次事件后连续0.5s内触发该事件，那触发周期会变成每间隔1s执行事件。
节流(throttle)

1. function throttle(fn,timeout){
2.     let flag = true
3.     return function(){
4.         if(flag){
5.             setTimeout(() => {
6.                 fn.apply(this,arguments)
7.                 flag = true
8.             }, timeout);
9.         }
10.         flag = false
11.     }
12. }

复制代码

其他应用场景举例

讲完了这两个技巧，下面介绍一下平时开发中常遇到的场景：

• 搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。
  
• 页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）
  

第三方实现

如果自己不愿意封装，可以用第三方实现，比如lodash库

来源:https://www.cnblogs.com/shinebay/p/17345692.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！