小总结 【节流 throttle、防抖 debounce】

节流

为了解决一些方法在用户操作时会不停触发的问题。

【节流类似于技能冷却】

//fn为接收的方法，time为间隔时间
const throttle = (fn,time)=>{
        let timer = null;
        return (...args)=>{
            if(timer){return}
            fn.call(undefined,...args)
            timer = setTimeout(()=>{
                timer = null
            },time)
        }
}

const f = throttle(()=>{
        console.log("hi");
    },3000)

这样，当调用f的时候，3秒后才能成功调用第二次

使用场景举例：在一段时间内如果用户频繁点击按钮，则设置一段时间间隔才使得按下生效

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

【防抖类似于打断回城】

const debounce = (fn,time)=>{
        let timer = null
        return (...args)=>{
            if(timer !== null){
                //清除计时器
                clearTimeout(timer)
            }
            //重新设置计时器
            timer = setTimeout(()=>{
                //计时时间到后，调用fn
                fn.call(undefined,...args)
                timer = null
            },time)
        }
    }

使用场景举例：拖动页面修改大小的时候，等拖动停止时再做重新定位