防抖&节流函数

防抖（debounce）与节流（throttle）

防抖

• 一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。无论触发多少次，只执行一次。

• 应用场景：避免频繁点击提交、搜索框输入值、resize调整浏览器窗口大小等

• 实现：添加定时器+清除定时器

节流

• 一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期才会执行第二次。减少触发执行的频率。
• 应用场景：scroll滚动监听事件、获取进度条信息等
• 实现：添加定时器+比较时间，切换定时器状态

代码

  
    
    
  

  
    

        防抖
        提交
    
    

    

        节流
        
    
    
    
  

总结

防抖和节流都是为了提高性能、优化用户体验，减少高频率执行js代码的方式。

[参考]:

https://blog.csdn.net/qq_33794744/article/details/108199216

https://zhuanlan.zhihu.com/p/265414145