学习防抖函数(学习于b站度一)

50 阅读1分钟

// 防抖函数,接收两个参数,第一个参数是要执行的函数,第二个是要延迟的时间

 function debouce(func,duration = 1000){
            let timer;
            //返回函数不能使用箭头函数,要用普通函数,箭头函数没有自己的this,
            return function(){
                clearTimeout(timer)
                timer = setTimeout(() => {
                    // // 保证函数this一致,箭头函数没有this,他的this指向最外层
                    func.apply(this)
                }, duration);
            }
        }
        //执行函数
        let resize = function(){
            console.log('宽度发生了变化');
        }
        const layout = debouce(resize,1000)
        //监听视口变化,如果视口大小发生变化则调用layout函数
        window.onresize=layout;