有多个button按钮,做防抖怎么做
时间: 2023-08-04 07:13:50 浏览: 156
可以为每个按钮创建一个防抖函数,然后在点击按钮时调用该函数。以下是一个示例代码:
```javascript
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
function handleClick() {
console.log("Button clicked");
}
button1.addEventListener("click", debounce(handleClick, 500));
button2.addEventListener("click", debounce(handleClick, 500));
```
在上面的代码中,`debounce` 函数接受一个函数和一个等待时间作为参数,并返回一个新的函数。该新函数将等待一段时间后调用原始函数。同时,`debounce` 函数还使用 `clearTimeout` 函数来清除之前设置的定时器,以确保只有最后一个函数调用被执行。最后,为每个按钮添加一个事件监听器,调用 `debounce` 函数并传递原始函数及等待时间作为参数。
阅读全文