以下两重情况都是用于高频触发事件，根据不同场景选择合适的用法。对于有停顿的高频触发事件建议选择防抖，然而对于高频触发并且连续的事件，选择节流；
防抖：
防抖：
防止连续多次触发，n秒内连续触发则只触发最后一次。目的：只执行一次
原理：
触发之前判断是否已经触发，已经触发就取消执行上一次的事件，然后执行本次事件。
案例：
首先，一个全局变量 fn 接住了 debounce 的一个返回值，闭包形成， debounce 内部的 id 被保存住，因此，每次 fn 执行的时候，它所用到的 id 都是一个
防抖的原理是，如果用户频繁的点击按钮，上一次的 setTimeout 都会立刻被下一次清除，需要执行的函数始终打不出来，只有最后一次没人清除它，因此会被执行。
点击查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<button id="btn1">btn1</button>
</body>
<script>
function debounce(){
let id;
return function(){
clearTimeout(id);
id = setTimeout(function(){
console.log('button clicked',id)
},5000);
}
}
var fn = debounce();
$("#btn1").on('click',function(e){
fn();
})
</script>
</html>
：节流：
节流：
防止连续多次触发，n秒内连续多次触发则n秒内执行一次。目的：减少执行次数
原理：
触发之前判断是否已经触发，已经触发就取消当前本次执行事件，继续执行上一个事件。
案例
节流的原理是当函数被成功的执行过一次，本次成功执行的时间会被记录下来，那么当用户频繁点击按钮的时候，这些次记录的时间距离上次成功执行的时间太短，小于阈值，因此不被执行
点击查看代码
<body>
<button id="btn1">btn1</button>
<script>
// 节流
function abc() {
let time = new Date();
return function () {
let time1 = new Date();
if (time1 - time > 1000) {
console.log(time1 - time);
time = time1;
}
}
}
let fn = abc();
$("#btn1").on('click', function (e) {
fn();
})
</script>
</body>