什么是防抖和节流？应用场景是什么？如何实现？

一、防抖

概念：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

场景：等待用户输入完毕再进行搜索

思路：每次触发事件时都取消之前的延时调用方法

const debounce = fn => {
    let timeout = null;          // 创建一个标记用来存放定时器的返回值
    return function (){
        clearTimeout(timeout);   // 当用户输入时把上一个setTimeout清除掉
        timeout = setTimeout(() => {
            fn.apply(this,arguments);
        },300)
    }
}

const sayHi = () => {
    console.log("防抖成功");
}

let inp = document.querySelector("#inp");
inp.addEventListener("input",debounce(sayHi));     // 防抖

一、节流

概念：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

场景：监听浏览器窗口变化时

思路：每次触发事件时都判断当前是否有等待执行的延时函数

const throttle = fn => {
    let canRun = true;          // 通过闭包保存一个标记
    return function (){
        if(!canRun) return;     // 在函数开头判断标记是否为true，不为true则return
        canRun = false;         // 立即设置为false
        setTimeout(() => {
            fn.apply(this,arguments);
            // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
            canRun = true;
        },300)
    }
}

const sayHi = e => {
    console.log(e.target.innerWidth,e.target.innerHeight);
}

window.addEventListener("resize",throttle(sayHi));