• 节流：在规定的问隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。
• 防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次

引入 Lodash (opens new window) 插件：里面封装函数的防抖与节流的业务（闭包、延时器）：可以通过 npm 或者引入 js 依赖。

🌰 防抖例子：搜索引擎搜索时，输入关键字的两种情况：

• 只要有输入文本发生变化，就向服务器发送搜索请求；
• 等到最后的输入不再变化（输入完毕），才向服务器发送搜索请求（这才是搜索更合理的情况）；

🌰 搜索防抖例子（在规定的时间后才执行）：

let input = document.querySelector('input')
input.oninput = _.debounce(function (){
    console.log('ajax发送请求了')
}, 1000)

🌰 节流例子（计数器按钮数字加一）：

// 计数器在一秒以内只执行一次
button.onclick = _.throttle( function () {
    count++;
    span.innerHTML = count;
    console.log('执行')
}, 1000)

如果有较多的业务代码加入到节流中，可以给浏览器很充裕的时间去解析。

总结：

• 防抖：用户操作频繁，但是只执行一次；
• 节流：用户操作频繁，把频繁的操作变为少量操作（最终还是会执行多次），给浏览器充裕的时间解析代码。