节流、防抖

防抖节流是什么

防抖debounce：在事件触发n秒后再执行，如果在n秒内又有新的触发，就重新计算
节流throttle：连续事件触发，在指定的时间内，不管触发几次，就只执行一次

使用场景:

防抖:实时搜索(keyup) 、 拖拽(mousemove)、
节流:窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、

没有防抖节流实例

 let input = document.getElementsByTagName("input")[0];
        input.onkeyup = function(){
            console.log(this.value);
        };

防抖

let input = document.getElementsByTagName("input")[0];

        input.onkeyup = debounce(function(){
            let input = document.getElementsByTagName("input")[0];
            console.log(input.value);
        },500);

          //防抖
        function debounce(fn, time) {
        let timer = null;
        return function () {
            //执行之前，先判断是否有定时器，有就先清除，保证只有一个定时器
            if (timer) {
                clearTimeout(timer);//清除定时器
            }
            //在用户输入时，如果停顿了2s，就去调数据
            timer = setTimeout(() => {
                fn();//触发事件
            }, time);//触发时间（2s或.....）
        }
    }

节流

let input = document.getElementsByTagName("input")[0];
        input.onkeyup = throttle(function(){
            let input = document.getElementsByTagName("input")[0];
            console.log(input.value);
        },500);
    //节流
    function throttle(fn, time) {//连续触发事件  规定的时间
        let flag = false;
        return function () {
            //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发
            if (!flag) {//不为假时 执行以下
                fn();//触发事件
                flag = true;//为真
                setTimeout(() => {//超时调用（在规定的时间内只执行一次）
                    flag = false;
                }, time);
            }
        }
    }