手写节流防抖

函数的节流防抖

函数的节流防抖，是一种用来优化前端的方式和手段。当我们使用input输入框时候，当我们按下键盘并一直触发keypress等事件时，会不停的去处罚事件的回调函数，大大的浪费了资源，降低了前端性能，于是，就出现了这个概念，节流和防抖。

节流

我们可以这样认为，就以一款游戏‘英雄联盟’进行举例说明。当我们按下E键的时候，触发了技能的使用，但，我们不能无限的使用。因为这个技能是有冷却时间的。
同理，节流的原理就是技能处于冷却中这样的阶段。

const throttle = (fn, time) => {
    let kill = false; // 技能未处于冷却中
    return (...args) => { // 如果fn带有多个参数，用...析构
        if (kill) {return}
        fn.call(undefined, ...args)
        kill = true   // 技能处于冷却中
        setTimeout(()=>{
            kill = false
        }, time)
    }
}
const e = ()=>{
    console.log("踏前斩")
}
const e2 = throttle(e,1300)
e2()

防抖

我们还以“英雄联盟”为例子，当角色回程的时候，被一个突如其来的导弹给击中了，那么此时，我们是不是还得按B键回程？那，是不是时间又重新计时了。
总体来说，防抖就是 回程被打断

const debounce = (fn, time) => {
    let B = null;
    return (...args) => {
        if (B !== null) {
            clearTimeout(B) // 打断回程, setTimeout执行一次，B的值就不为空了
        }
        // 重新回程
        B = setTimeout(()=>{
            fn.call(undefined, ...args)
            B = null
        }, time)
    }
}
const tp = () => {
    console.log('回程')
}
const c = debounce(tp,3000)
c()