<button id="myButton">Click me</button>
<script>
// 防抖产生一次
function debounce(func, delay) {
let timer = null;
return function (...args) {
const context = this;
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
}
};
// 节流,规定时间内触发
function throttle(func, delay) {
let lastTime = 0; // 上次时间
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) { // 现在时间 - 上次时间 >= 传入间隔时间,在触发
func.apply(this, args);
lastTime = now; // 更新上次的时间
}
}
};
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', debounce(function (arg) {
console.log('Button clicked!', arg);
}, 1000));
myButton.addEventListener('click', throttle(function (arg) {
console.log('Button clicked!', arg);
}, 1000));
</script>