前端防抖和节流函数

image.png

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

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <div class="btn">       https://mp.weixin.qq.com/s/LgwTCzBgYWBe2JFXg8YMtQ<br />
           scroll 事件本身会触发页面的重新渲染，<br />
           同时 scroll 事件的 handler 又会被高频度的触发, <br />
           因此事件的 handler 内部不应该有复杂操作，<br />
           例如 DOM 操作就不应该放在事件处理中。<br />

           针对此类高频度触发事件问题<br />
           （例如页面 scroll ，屏幕 resize，监听用户输入等）<br />
           ，下面介绍两种常用的解决方法，防抖和节流。<br />
       </div>
   </head>
   <body>
       <style>
           .btn{
               height: 2000px;
           }
       </style>
        <script>
           // 防抖动函数
           function debounce(func, wait, immediate) {
               var timeout;
               return function() {
                   var context = this, args = arguments;
                   var later = function() {
                       timeout = null;
                       if (!immediate) func.apply(context, args);
                   };
                   var callNow = immediate & !timeout;
                   clearTimeout(timeout);
                   timeout = setTimeout(later, wait);
                   if (callNow) func.apply(context, args);
               };
           };
           var myEfficientFn = debounce(function() {
               console.log("Success真正的操作");
               // 滚动中的真正的操作
           }, 250);
   
           // 采用了防抖动
           window.addEventListener('scroll',myEfficientFn );
           // 没采用防抖动
           // window.addEventListener('scroll',realFunc);
        </script>
   </body>
</html>

节流函数优化

!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <div class="btn">
防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，<br />
而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。<br />

这个时候，我们希望即使页面在不断被滚动，<br />
但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，<br />
就要用到另一种技巧，称为节流函数（throttling）。

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

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

与防抖相比，节流函数多了一个 mustRun 属性，代表 mustRun 毫秒内，必然会触发一次 handler ，<br />
同样是利用定时器，看看简单的示例：s</div>
    </head>
    <body>
        <style>
            .btn{
                height: 2000px;
                pointer-events: none;
            }
        </style>
         <script> 
            // 简单的节流函数
            function throttle(func, wait, mustRun) {
                var timeout,
                    startTime = new Date();

                return function() {
                    var context = this,
                        args = arguments,
                        curTime = new Date();

                    clearTimeout(timeout);
                    // 如果达到了规定的触发时间间隔，触发 handler
                    if(curTime - startTime >= mustRun){
                        func.apply(context,args);
                        startTime = curTime;
                    // 没达到触发间隔，重新设定定时器
                    }else{
                        timeout = setTimeout(func, wait);
                    }
                };
            };
            // 实际想绑定在 scroll 事件上的 handler
            function realFunc(){
                console.log("Success");
            }
            // 采用了节流函数
    window.addEventListener('scroll',throttle(realFunc,500,1000))
         </script>
        
    </body>
</html>

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

最后编辑于：2019.08.07 10:04:05