前端防抖和节流函数

image.png

说多了没有用
直接上代码
防抖函数优化

解决谷歌浏览器 滑动警告报错 touch-action: pan-y;

   
       
       
       
       https://mp.weixin.qq.com/s/LgwTCzBgYWBe2JFXg8YMtQ

           scroll 事件本身会触发页面的重新渲染，

           同时 scroll 事件的 handler 又会被高频度的触发, 

           因此事件的 handler 内部不应该有复杂操作，

           例如 DOM 操作就不应该放在事件处理中。


           针对此类高频度触发事件问题

           （例如页面 scroll ，屏幕 resize，监听用户输入等）

           ，下面介绍两种常用的解决方法，防抖和节流。

       
   
   
       
        
   

节流函数优化

!DOCTYPE html>

    
        
        
        

防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，

而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。


这个时候，我们希望即使页面在不断被滚动，

但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，

就要用到另一种技巧，称为节流函数（throttling）。

节流函数，只允许一个函数在 X 毫秒内执行一次。


与防抖相比，节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。


与防抖相比，节流函数多了一个 mustRun 属性，代表 mustRun 毫秒内，必然会触发一次 handler ，

同样是利用定时器，看看简单的示例：s
    
    
        
         
        
    

这里是原文地址 希望对你有帮助