使用场景：
一:函数防抖：
实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
例如：
<body>
<button>点我防抖</button>
<script>
let button = document.querySelector("button");
let timeout = null; //创建一个标记用来存放定时器的返回值
button.onclick = function () {
if (timeout) clearTimeout(timeout);//每当用户输入的时候把前一个setTimeout清理掉
timeout = setTimeout(()=> { //创建一个新的 setTimeout
console.log("防抖");
}, 1000);
};
</script>
</body>效果：
为了方便使用，把他封装成防抖函数：
<body>
<button>点我防抖</button>
<script>
let button = document.querySelector("button");
button.onclick = debounce(function () { //点击事件触发防抖函数
console.log(this);
}, 1000);
封装的防抖函数:
function debounce(fn, delay) {
let timeout = null;
return function () { //真正的事件处理函数，this:事件的触发者
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
fn.call(this); //改变this指向
}, delay);
};
}
</script>
</body>效果：
二：函数节流：
实现思路：
例如：
<body>
<button>点我</button>
<script>
let button = document.querySelector("button");
let timeout = null;
button.onclick = function () {
if (timeout) return;
timeout = setTimeout(function () {
console.log("节流");
timeout = null;
}, 1000);
};
</script>
</body>效果(不管点多快都是一秒输出一次):
为了方便使用，把他封装成防抖函数：
<body>
<button>点我节流</button>
<script>
let button = document.querySelector("button");
let timeout = null;
//点击事件触发节流函数
button.onclick = throttle(function () {
console.log("节流");
}, 1000);
//封装公共节流函数：
function throttle(fn, delay) {
return function () {
//真正的事件处理函数 this:事件的触发者
if (timeout) return;
timeout = setTimeout(()=> {
fn.call(this);
timeout = null; //置空，让事件再次触发时，重新创建一个定时器
}, delay);
};
}
</script>
</body>