javascipt 防抖函数DEMO
时间: 2023-11-15 15:06:27 浏览: 34
好的,下面是一个 JavaScript 实现防抖函数的例子:
```javascript
function debounce(func, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(context, args);
}, delay);
}
}
```
上面代码中,`debounce` 函数接受两个参数:需要进行防抖操作的函数和设定的时间间隔。它返回一个新的函数,该函数会在设定的时间间隔内只触发一次原始函数,并将原始函数的执行上下文和参数传递到原始函数中执行。
下面是如何使用该函数的示例:
```javascript
function doSomething() {
console.log('执行操作');
}
const debounceDoSomething = debounce(doSomething, 1000);
window.addEventListener('scroll', debounceDoSomething);
```
上述代码中,我们定义了一个 `doSomething` 函数,它将进行我们需要执行的操作。然后,我们使用 `debounce` 函数创建了一个新的函数 `debounceDoSomething`,该函数在滚动事件触发后会在 1000ms 后触发 `doSomething` 函数,从而达到防抖的效果。
最后,我们将 `debounceDoSomething` 函数作为滚动事件的回调函数来使用,如上面的 `window.addEventListener('scroll', debounceDoSomething)`。这样,当滚动事件连续触发时,`doSomething` 函数只会在设定的时间间隔内触发一次,从而减少了不必要的计算和渲染。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)