概念
函数的节流与防抖是优化JavaScript的高频率执行的一种手段。
节流
函数的节流应用于一些函数高频率的场景，多数在监听页面元素一直触发的事件。例如高频率触发的滚动事件。
来看看下面监听滚动事件的例子：
let canRun = true;
document.getElementById('scroll').onscroll = function () {
if (canRun) return;
canRun = false;
setTimeout(function () {
console.log('do something');
canRun = true;
}, 300)
}
- 首先定义一个变量（函数运行的开关）；
- 每次在函数运行的时候检测开关（判断符合运行条件）；
- 符合条件利用setTimeout运行行数；
- 最后，等setTimeout里面的方法执行完毕，把执行条件canRun = true，允许下次执行；
防抖
防抖函数通常运用在表单验证中。在验证的过程中往往是等待用户输入完毕后再进行验证。需要检查格式是否正确。如果不正确在进行错误提示。下面我们还是用滚动的例子来看看：
let timer = false;
document.getElementById('scroll').onscroll = function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log('do something');
}, 300)
}
- 首先先定义一个标记；
- 在执行函数的过程中，先会清理一遍timer；
- 然后在定义一个timer；在这里利用setTimeout做一个缓存。
这里巧妙的利用setTimeout做了一个缓存，每次在运行函数的时候都会清理一遍timer，在利用setTimeout做一个函数缓存。避免了函数的多次运行。其实，用队列的方式也可以做到这种效果。这里就不深入了。
