js中的节流和防抖的区别及应用场景

函数节流(throttle)和防抖(debounce)：是一种性能优化手段

一、函数节流

类比生活中的例子。高频率触发某个事件就像一个大开的水龙头，水流源源不断大量流出，就像代码在不断执行。这是对资源的一种浪费。我们要通过节流，把水龙头拧紧一点，让它流水的频率降低，但是每一段时间都能滴下一滴水，从而节省资源。

节流应用场景：
用户滚动浏览器滚动条的时候，就会调用后台的接口来更新页面上的某些内容。如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用，损耗浏览器引擎。使用节流函数限制接口调用频率，优化性能。

节流函数

//节流函数，只有大于设定的周期才会执行第二次
function throttle(fn, delay) {
    let lastTime = 0;
    return function() {
        let nowTime = +new Date();
        if (nowTime - lastTime > delay) { //判断相隔的两次触发是否满足延时
            fn.call(this); //this指向window
            lastTime = nowTime;
        }
    }
}

二、函数防抖

在规定的时间周期内持续触发事件，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么最终只会执行一次。

防抖应用场景：
主要是搜索功能的实现，用户输入文本时我们会自动联想匹配出一些结果供用户选择。我们可能首先想到的做法就是监听keypress事件，然后异步去查询结果。这个方法本身是没错的，但是如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的。使用防抖函数就可以实现用户停止输入的时候才去触发查询的请求。

防抖函数

//防抖函数,在规定时间内只让最后一次生效
function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer); //清除前一次的事件触发
        timer = setTimeout(() => (fn.call(this)), delay); //重新设置定时触发事件
    }
}

总结防抖和节流的区别： 防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

PS： 防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象，应该熟练掌握。

参考文章：
js函数节流和函数防抖的作用
深入理解JS防抖与节流