防抖&节流

Posted 2020-11-13 fanzhikang

使用的原因

在前端开发当中有一部分的用户行为会频繁操作触发事件执行，而对于DOM操作，资源加载等耗费性能的处理，很可能导致页面卡顿，甚至浏览器崩溃，函数节流和防抖就是解决类似需求应运而生的

节流

预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行，就像水滴攒到一定重量会下落一样

运用场景：

• 窗口调整（resize）
• 页面滚动（scroll）
• 抢购疯狂点击（mousedown）

        let throttle =  (fn,waitTime) => {
            let lastTime = 0;
            return function () {
                let nowTime = new Date().getTime();
                if (nowTime - lastTime >= waitTime) {
                    fn();//执行的时候注意this指向
                    lastTime = nowTime;
                }
            }
        }

防抖

函数防抖就是函数需要频繁触发情况时，只有足够的空闲时间，才执行一次。就像公交司机会等人都上车后才出站

运用场景

• 实时搜索（keyup）
• 拖拽（mousemove）

    let antiShake = (fn,intervalTime) => {
        let timer = null;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn()
            },intervalTime)
        }
    }