13.防抖和节流

防抖

=> 就是在我们频繁触发一个事件行为的时候
=> 只执行最后一次
=> 一般使用的是: 搜索框  滚动 ... 

    let inp = document.querySelector('input')
    // 一开始我定义一个定时器的返回值
    let time = null
    inp.oninput = function () {
        // 上来第一不要做就是关闭定时器
        clearTimeout(time)
        // 这里我们开启定时器
        time = setTimeout(function () {
            console.log('我触发了');
        },1000)
    }

节流

=> 就是我们频繁触发一个事件行为
=> 只在规定的时间内执行一次

    let btn = document.querySelector('button')
    // 定义个节流阀(开关)
    let flag = true
    // 添加事件
    btn.onclick = function () {
        // console.log(444);
        // 首先要判断我们的节流阀的一个状态
        if(flag === false) return 
        // 代码能执行到这里说明节流阀是开启状态
        // 随手关闭节流阀
        flag = false 
        console.log('我被点击了');
        setTimeout(function () {
            // 这个时候我们在打开我们的节流阀
            flag = true
        },1000)
    }