前端面试之函数防抖和节流

前言

js防抖和节流函数不仅是前端面试中经常问到的问题，也是我们平常开发中频繁处理dom事件时会用到的。
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数频繁调用，会加重浏览器的的负担，导致用户体验非常糟糕。此时，我们就可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

一、函数防抖

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会触发scroll事件。

1. 如何实现

<button id="btn">按钮</button>
function debounce(fn,delay) {
        //记录上一次的计时器
        var timer = null;
        return function(){
            //清除上一次的计时器
            clearTimeout(timer)
            timer = setTimeout(function(){
                fn.apply(this)
            },delay)
        }
    }
    document.getElementById('btn').onclick = debounce(function(){
        console.log('点击事件被触发'+Date.now());
    },1000)

2.函数防抖的应用场景

对于连续的事件响应我们只需要执行一次回调：

• 每次 resize/scroll 触发统计事件
• 按钮点击事件

二、函数节流

函数节流（throttle）：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。

1. **如何实现**

	html,body{
            height: 500%;
        }
     function throttle(fn,delay) {
       //记录上一次触发的时间
       var lastTime = 0;
       return function(){
           //记录当前函数触发的时间
           var nowTime = Date.now();
           if(nowTime - lastTime > delay){
               //修正this问题
               fn.call(this);
               //同步时间
               lastTime = nowTime;
           }
       }
    }
   document.onscroll = throttle(function () {
        console.log('scroll事件触发'+Date.now());
    },200)

2.函数节流的应用场景

需要间隔一定时间触发回调来控制函数使用频率：

• DOM 元素的拖拽功能实现（mousemove）
• 计算鼠标移动的距离（mousemove）
• onScoll

最后

用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行。