js中的函数节流和防抖

在前端开发中有一部分用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿，甚至浏览器奔溃，影响用户体验。通常我们会用函数的节流与防抖这两种方案去解决类似问题

节流，就是保证一段时间内只执行一次核心代码

    function throttle(fn, delay) {
        let lastTime = 0;
        return function() {
            let nowTime = +new Date();
            if (nowTime - lastTime > delay) { //判断相隔的两次触发是否满足延时
                fn.call(this); //this指向window
                lastTime = nowTime;
            }
        }
    }

防抖，在规定时间内只让最后一次生效

    function debounce(fn, delay) {
        let timer = null;
        return function() {
            clearTimeout(timer); //清除前一次的事件触发
            timer = setTimeout(() => (fn.call(this)), delay); //重新设置定时触发事件
        }
    }

总结

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
• 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。