防抖节流的运用场景

防抖

事件触发n秒内不再触发该事件，才会执行函数，在n秒内再次触发的话，时间重新计算 保证在n秒内，只有最后一次操作被触发

• 登录，
• 输入框搜索
• 调整浏览器大小

let debounce = function (callback, delay) {
        let t = null;
        return function () {
            if (t != null) {
                clearTimeout(t)
            }
            t = setTimeout(() => {
                //箭头函数 this指向调用函数的元素input
                callback.call(this)
            }, delay);
        }
    }

节流

在n秒内，多次触发事件时仅调用一次事件回调函数

• 鼠标点击事件；
• 监听鼠标滚动事件

let throttle = function (callback, delay) {
        let flag = true
        return function () {
            if (flag) {
                setTimeout(() => {
                    callback.call(this)
                    flag = true
                }, delay);
                
            }
            flag = false
        }