JS实现防抖与节流（使用按钮触发事件）
引言：什么是JS的防抖与节流？
手写JS的防抖与节流
<body>
<button id="debounce">防抖</button>
<button id="throttle">节流</button>
<script>
//防抖 在一定时间内第二次触发某个事件时，他会清空上一个该事件，
//若在某固定时间内没有再次触发该事件，此事件函数才会被正在执行
function debounce(fn, wait) {
let task = null;
return function () {
if (task) {
console.log('清除计时器');
clearTimeout(task);
}
task = setTimeout(() => {
console.log('设置了计时器');
fn.apply(this, arguments);
}, wait);
}
}
function fun1() {
console.log('btn1的函数执行了');
}
var btn1 = document.getElementById('debounce');
btn1.addEventListener("click", debounce(fun1, 2000))
// 节流 在一定时间内，该事件只能触发一次，若在该时间内再次出发该事件，则不会生效。
function throttle(fn, wait) {
let task = null;
return function () {
if (!task) {
console.log('设置了task定时器');
task = setTimeout(() => {
task = null;
fn.apply(this, arguments);
}, wait);
}
}
}
function fun2(){
console.log('btn2的函数执行了');
}
var btn2 = document.getElementById('throttle');
btn2.addEventListener('click',throttle(fun2,2000))
</script>
</body>
执行效果：
