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

前言

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

一、函数防抖

函数防抖（debounce）：是指事件被触发n秒后才会执行回调，如果在这n秒内事件又被触发，则重新计算。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会触发scroll事件。

1. 如何实现

<button id="btn">按钮</button>
function debounce(fn,delay) {
        //记录上一次的计时器
        let timer = null;
        return function(){
           let args = arguments
            //清除上一次的计时器
            clearTimeout(timer)
            timer = setTimeout(function(){
                fn.apply(this,args)
            },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) {
       //记录上一次触发的时间
       let lastTime = 0;
       return function(){
          let  args = arguments;
           //记录当前函数触发的时间
           let nowTime = Date.now();
           if(nowTime - lastTime > delay){
               //修正this问题
               fn.apply(this,args);
               //同步时间
               lastTime = nowTime;
           }
       }
    }
   document.onscroll = throttle(function () {
        console.log('scroll事件触发'+Date.now());
    },200)

2.函数节流的应用场景

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

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

最后

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