JS面试题：防抖节流的实现

在前端面试的时候，面试官很可能会问我们关于页面性能优化的手段，性能优化方法有很多，比如图片懒加载、路由懒加载、压缩资源、减少HTTP请求、减少不必要的回流和重绘、异步加载资源、和防抖节流等。同时手写一个防抖节流也是面试中的常考题。

所谓防抖节流：

防抖：指的是用户对响应事件进行触发后，事件不会立即被调用执行，而是在等待一定时间后再执行。如果在这段时间内用户又再次触发事件，此时会重新计时，直至在设置的等待时间之内事件没有再次被触发时事件才会执行。

节流：指的是在一定时间间隔内只事件只会执行一次。即只要在这个时间间隔内，无论事件被触发多少次，它都只会执行一次。

防抖节流的实现

防抖和节流的效果都是通过闭包来实现的。

防抖

1. 设置一个定时器变量。
2. 在事件触发时，清除上一次的定时器。
3. 创建一个新的定时器，在指定的时间间隔后执行函数。

//html
<button id="btn">提交</button>
//script
let btn = document.getElementById('btn')  //获取btn的dom结构

    btn.addEventListener('click', debounce(handle, 1000)) //监听点击事件

    function handle(e, a, b) { //响应事件
      console.log('提交了', this);
    }
    
    function debounce(fn, wait) { //实现防抖功能的函数debounce
      let timer = null
      return function(...args) { // this === btn
        clearTimeout(timer)// 销毁上一次的定时器
        timer = setTimeout(() => {
          fn.call(this, ...args)
        }, wait)
      }
    }

节流

1. 设置一个定时器变量和一个上次执行时间戳变量。
2. 在事件触发时，获取当前时间戳。
3. 比较当前时间戳与上次执行的时间戳，如果时间差大于指定的时间间隔，则执行函数并更新上次执行的时间戳。

//html
<button id="btn">提交</button>
//script
let btn = document.getElementById('btn')  //获取btn的dom结构

    btn.addEventListener('click', throttle(handle, 1000)) //监听点击事件

    function handle(e, a, b) { //响应事件
      console.log('提交了', this);
    }
function throttle(fn, wait) { // 
      let pre = Date.now()   // 1
      return function(...args) {
        let cur = Date.now()  // 3  // 3.1
        if (cur - pre > wait) {
          fn.call(this, ...args)
          pre = cur
        }
      }
    }

总结

手写一个防抖节流是面试中的常考题，同时也是一个比较简单的题目，通过学习防抖节流的实现步骤和实现原理，可以帮助我们很快的掌握防抖和节流。