浅谈debounce & throttle 极简思想

原因:
通常绑定响应鼠标移动、窗口大小调整、滚屏等事件时,绑定的函数触发的频率会很频繁。
若稍处理函数微复杂,需要较多的运算执行时间和资源,往往会出现延迟,甚至导致假死或者卡顿感。
目的:
为了优化性能,这时就很有必要使用debouncethrottle

debounce函数通常称为防抖动函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 fn.

//简单实现
function debounce(fn, wait) {   
    wait = wait || 0;   
    let timer;    
 
    return function () {   
        if (timer) {   
            clearTimeout(timer);
            timer= null;   
        }  
        timer= setTimeout(function() {   
            fn();
      }, wait);
   };
 }

throttle节流函数,在 wait 秒内最多执行 fn 一次的函数。

function throttle( fn ,delay){
   delay = delay || 0;   
   var timer, lastTime = 0; 
    return function(){
       var current  = new Date().getTime();
       if(current >= lastTime + delay){
         fn();
         lastTime = current;   
       }else{
         if (timer ) {   
             clearTimeout(timer );   
             timer = null;   
         }   
         timer = setTimeout(function(){
           fn();
         },delay)
       }   
   }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容