看完这篇博客，你将了解

• 什么是节流，什么是防抖
• 节流与防抖的应用场景
• 节流的代码实现
• 防抖的代码实现

概念

节流（throttle）

防抖（debounce）

节流和防抖都是用来限制函数执行频率，保证短时间内的连续动作永远只会触发一次。不同之处在于节流是执行第一次，防抖是执行最后一次

节流就像技能 cd，比如控制游戏里的人物开一枪后，必须等 300 ms 才能继续出枪，这就限制了一定时间内子弹的流量

防抖就像按住弹簧，它不会弹起直到你松开它一段时间

节流与防抖的应用

懒加载

懒加载的时候需要监听计算滚动条的位置，每次页面滚一下，可能就会触发几十次函数执行。可以使用节流降低计算频率。

suggestion

假设网站有个搜索框，每次用户输入文本我们都会自动联想匹配一些结果提供选择。最直接的做法是监听 input 或 keyup 事件，然后异步查询结果。但是如果用户在一瞬间输入 10 个字符，那么浏览器会在瞬间触发 10 次请求，这无疑不是我们想要的。需要的只是连续输入动作的最后一次结果，因此防抖就能派上用场

window.onresize

想在窗口改变大小之后重算布局，可以用防抖

onmousemove

编写游戏的时候，如果每次客户端鼠标移动都会发送坐标给服务器，可以用节流

防抖的代码实现

原生 js

let timerId
function newFn() {
    if(timerId) clearTimeout(timerId)
    timerId = setTimeout(fn, 300)
}

underscore.js

引入 underscore.js，直接

var newFn = _.debounce(fn, 300)

节流的代码实现

原生 js

let coolDown
function newFn() {
    if(coolDown) return
    coolDown = true
    setTimeout(() => {coolDown = false}, 300)
    fn()
}

underscore.js

引入 underscore.js，直接

var newFn = _.throttle(fn, 300)