面试题：防抖和节流

应用场景

防抖和节流都是用来防止高频率的js代码的执行

防抖(debounce)

防抖的本质就是不管触发多少次事件，只会执行最后一次事件

打个比方：你去游乐园玩过山车。每次都会坐上去人。不是上一个人就开一次。而是等到最后一个位置有人坐上去时才会开车。这时候的参照标准就是最后一个人上车，坐山车好比我们的js代码，最后一个人就充当我们的执行条件。

上代码：

       <button class="debounce">防抖</button>

       let debounce = document.querySelector('.debounce')
        let timeId
        debounce.addEventListener('click', () => {
            clearTimeout(timeId)
            timeId = setTimeout(() => {
                console.log('需求写在这');
            }, 2000);
        })

执行以上代码，控制台会在 2s 后打出日志，2s 之内的操作都被清空，以最后一次的操作为准。

节流(throttle)

节流的本质就是在一定时间内连续触发事件，但事件只会执行一次

打个比方：就好像你在打英雄联盟，一直a对面小兵，一定时间内不管点多少下都是a一次

上代码：

      <button class="throttle">节流</button>

      let throttle = document.querySelector('.throttle')
        let isOk = true;
        throttle.addEventListener('click', () => {
            setTimeout(() => {
                if (!isOk) { return }
                isOk = false;
                let timer = setTimeout(() => {
                    console.log("需求写在这");
                    clearTimeout(timer);
                    isOk = true;
                }, 1000);
            }, 1000);
        })

执行以上代码你就会看到控制台1s后打印出结果，1s内多次触发不会重复执行打印日志