基本对比：
| 函数防抖（debounce） | 函数节流（throttle） | |
|---|---|---|
| 基本思想 | 一些函数不能在没有间断的情况下重复执行，如第一次调用时创建一个计时器在指定时间间隔之后运行代码，不管之前的有没有调用都清除之前的并重新设置一个计时器重新开始计时 | 一些函数不能在没有间断的情况下重复执行，如第一次调用时创建一个计时器在指定时间间隔之后运行代码，在第二次调用时如果之前的在执行中，则不管；如果已经执行完，则清除之前的并重新设置一个计时器 |
| 解释 | 在一定时间内函数只执行一次，如果该时间段内再次触发则重新开始计时 | 限制一个函数在一定时间间隔内只执行一次 |
| 应用场景 | 如搜索框输入、滚动加载、窗口大小resize | 如联想搜索 |
函数防抖基本应用
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};
函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。
函数节流基本应用
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲，如果在执行中，则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
函数节流是限制函数一段时间内只能执行一次。因此，通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。
