js中的防抖和节流之间的区别以及实现方式

概念:

函数防抖：触发高频事件N秒内函数只会执行一次，如果N秒内函数再次被执行，则重新计算时间

函数节流：高频事件触发，N秒内只会执行一次，所以节流会稀释函数的执行频率

函数节流与函数防抖都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象

1函数防抖

实现方式：每次触发一个事件时候设置一个延迟调用方法，并且取消之前的延迟调用方法

缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

//防抖debounce代码：
function debounce(fn,delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', debounce(handle,500));

2函数节流

实现方式：每次触发事件时，如果当时有执行的延迟函数，则直接return

//节流throttle代码：
function throttle(fn,delay) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
 
function sayHi(e) {
    console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));

总结：

函数防抖：

将多次操作合并为一次操作。原理是维护一个计时器，规定在延迟时间后触发函数，在这个时间之内如果再次触发的时候就会重置，计时器重新设置，这样，只有最后一次操作会被执行

函数节流：使一定的时间内只执行一次函数，原理是通过判断是否有延迟函数执行

区别：

函数节流不管事件触发有多频繁，都会保证在规定的时间内一定执行一次真正的事件处理函数，

函数防抖则是最后一次事件后才触发一次函数，例如在页面无限加载的场景下，我们需要用户滚动界面的时候，每隔一段时间发动一次ajax请求，而不是在用户停下滚动的时候发送，这样的情况就适合节流技术来实现

3、参考文献：

节流和防抖的区别，以及如何实现

函数节流与函数防抖