我理解的函数节流和防抖

为什么需要函数防抖和函数节流？

在浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续进行过多的DOM操作可能会导致浏览器挂起，甚至崩溃；例如当调整浏览器大小的时候，resize事件会连续触发；如果在resize事件内部进行DOM操作，高频率的更改可能会导致浏览器崩溃；为了解决上面的问题，就有了函数节流和防抖。

什么是函数防抖和函数节流？

防抖(debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似却又不同。 背后的基本思想是某些代码不可以在没有间断的情况下连续重复执行。

应用场景

类型	场景
函数节流	1. DOM元素拖拽（mousemove） 2. Canvas 模拟画板功能（mousemove） 3.鼠标不断点击触发，mousedown(单位时间内只触发一次) 4.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
函数防抖	1. 给按钮加函数防抖防止表单多次提交 2. 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数 3. 判断scroll是否滑到底部，滚动事件+函数防抖 4.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

防抖

如果一个事件被频繁触发多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。 函数防抖可以把多个顺序的调用合并成一次。即一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。我们可以联想到帕金森综合征。

即触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。

防抖函数分为非立即执行版和立即执行版。

• 非立即执行版：即触发事件后函数不会立即执行，而是在n秒后执行，如果在n秒内又触发了事件，则会重新计算函数执行时间。

• 立即执行版：触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果。

非立即执行版代码实现

function debounce(fn, delay, scope) {
	// 记录上一次的延时器
    let timer = null;
    return function () {
        // setTimeout()中函数环境总是window,故需要当前环境的副本；
        let context = scope || this, args = arguments; // 保证最终返回的函数this指向不变以及依旧能接受到e参数
        // 清除上一次延时器
        if (timeout) clearTimeout(timeout); // 如果事件被触发，清除timer并重新开始计时
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}
// 代码解读
1. 第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码；
2. 当第二次调用该函数时，它会清除前一次的定时器并设置另一个；
3. 如果前一个定时器已经执行过了，这个操作就没有任何意义；
4. 如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器；
5. 只有在执行函数的请求停止了delay时间之后才执行。

立即执行版代码实现

function debounce(func,wait,scope) {
    let timer = null;
    return function () {
        let context = scope || this, args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout; // 临时变量
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)
        if (callNow) func.apply(context, args)
    }
}

节流

如果一个事件被频繁触发多次，节流函数可以按照固定频率去执行对应的事件处理方法。 函数节流保证一个事件n秒内只执行一次。我们可以联想到水龙头

指连续触发事件但是在n秒中只执行一次函数。 节流会稀释函数的执行频率。节流一般有两种方式实现，分别是时间戳版和定时器版。

时间戳实现

// 即在持续触发事件的过程中，函数会立即执行，并且每n秒执行一次
let prev = 0; // 记录上一次函数触发的时间
function throttle(fn, threshold, scope) {
    let timer;
    return function () {
        let context = scope || this, args = arguments;
        let now = Date.now(); // // 记录当前函数触发的时间
        if (now - prev > threshold) {
            prev = now; // 同步时间
            fn.apply(context, args); // // 修正this指向
        }
    }
}

定时器实现

// 在持续触发事件的过程中，函数不会立即执行，并且每n秒执行一次，在停止触发事件后，函数还会再执行一次
function throttle2(fn, threshold, scope) {
    let timer;
    return function () {
        let context = scope || this, args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                timer = null;
            }, threshold)
        }
    }
}

时间戳和定时器的区别：

时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

总结

debounce和throttle均是通过减少高频触发事件的实际事件处理程序的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。
debounce可以把多个顺序的调用合并成一次。
throttle保证一个事件一定时间内只执行一次。
两者的区别在于函数节流是固定时间做某一件事，比如每隔1秒发一次请求。而函数防抖是在频繁触发后，只执行一次（前提都是频繁触发）

文章有什么不对的地方，欢迎指正！