JS函数防抖＆函数节流及其使用场景

JS防抖&节流函数及其使用场景

---

1、防抖函数概念

函数防抖是优化高频率执行JS代码的一种手段【永远在执行最后一次】

其中如：浏览器的resize、scroll，鼠标的mousemove、mouseover等事件在触发时会不断绑定事件上的回调函数，浪费资源、降低性能，这时需要用防抖函数来进行调用次数的限制。

（1）使用场景及函数样式

回到顶部、立即（实时）搜索、输入框搜索自动补全事件、频繁点赞&取消点赞等

//防抖函数 重点【必须清理定时器】 
    function debounce(callback,time = 400){
    		// 设置定时器时间为400ms
        let t;
        return function(){
    
            clearTimeout(t);
            t = setTimeout(callback,time);
        }
    }
    //绑定滚动条事件
    window.onscroll = debounce(function(){
    
        console.log("调用了一次"); 	//注：log("要执行的事件")
    },500); 	// 限制500ms执行一次

实现原理：如果在500ms内频繁操作事件，则每次都会清除一次定时器然后重新创建一个。直到最后一次操作事件，然后等待500ms后进行处理

（2）作用

当有些事件触发频率太高，浏览器来不及处理会造成浏览器卡顿、掉帧等

2、节流函数概念

函数防抖是优化高频率执行JS代码的一种手段

其中如：浏览器的resize、scroll，鼠标的mousemove、mouseover等事件在触发时会不断绑定事件上的回调函数，浪费资源、降低性能，这时需要用防抖函数来进行调用次数的限制。

（1）使用场景及函数样式

onrize、onscroll等频繁触发的函数，比如获取滚动条的位置然后执行下一步事件

// 节流函数 重点【最后必须重新赋值】
    function throlle( callback,time){
    
        let lasttime = new Date().getTime();
        return function(){
    
            let now = new Date().getTime();
            if(now - lasttime > time){
    
                callback();
                lasttime = now;
            }
        }
    }
    window.onscroll = throlle(function(){
    
        console.log("调用了一次");
    },100);

实现原理：在一定时间间隔内只执行一次，在这段时间内无视后来产生的函数调用请求

（2）作用

当有些事件触发频率太高，浏览器来不及处理会造成浏览器卡顿、掉帧等

3、函数防抖&节流的区别

①相同点

都可以通过setTimeout实现，目的都是降低回调执行频率，节省资源，提高性能，前提都是频繁触发

②不同点

防抖：在一段连续操作结束后处理回调，将多次触发变为一次触发，一定时间内连续触发的事件只在最后一次执行

节流：减少一段时间的触发频率，一段连续操作中每一段时间只执行一次，侧重于一段时间内只执行一次

触发，一定时间内连续触发的事件只在最后一次执行

节流：减少一段时间的触发频率，一段连续操作中每一段时间只执行一次，侧重于一段时间内只执行一次