防抖 代码实现
时间: 2023-07-26 15:12:09 浏览: 55
防抖是一种常用的前端优化技术,可以避免在短时间内频繁触发函数而导致的性能问题。下面是一个简单的防抖函数的代码实现:
```javascript
function debounce(func, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
}
}
```
这个函数接收两个参数:要执行的函数 `func` 和防抖的延迟时间 `delay`。它返回一个新的函数,当新函数被调用时,它会清除之前的定时器,然后再设置一个新的定时器来延迟执行原函数 `func`。如果在延迟时间内再次调用新函数,则会清除之前的定时器并重新设置一个新的定时器,直到延迟时间结束后才会执行原函数。这样就可以避免在短时间内频繁执行原函数而导致的性能问题。
相关问题
js防抖 代码实现
要实现JS防抖的代码,可以参考以下步骤:
1. 创建一个防抖函数,命名为`debounce`,该函数接收两个参数:要执行的函数`func`和延迟时间`delay`。
2. 在`debounce`函数内部创建一个变量`timer`用来保存定时器的ID。
3. 返回一个函数,命名为`debounced`,该函数用于实际执行防抖操作。
4. 在`debounced`函数内部,使用`clearTimeout`来清除之前的定时器。
5. 创建一个新的定时器,将其ID保存到`timer`变量中。
6. 在新的定时器中,使用`setTimeout`来延迟执行传入的函数`func`,延迟时间为`delay`。
7. 最后,将`debounced`函数作为返回值返回。
下面是具体的代码实现:
```javascript
function debounce(func, delay) {
let timer;
return function debounced() {
clearTimeout(timer);
timer = setTimeout(() => {
func();
timer = null;
}, delay);
};
}
```
这样,你就可以使用`debounce`函数来创建一个防抖函数了。可以将要执行的函数和延迟时间作为参数传入,然后将返回的函数绑定到相应的事件上。
例如,使用`debounce`函数创建一个防抖函数,并将其绑定到输入框的`input`事件上:
```javascript
const debouncedFunction = debounce(() => {
console.log('执行防抖操作');
}, 1000);
Input.oninput = debouncedFunction;
```
这样,在输入框输入内容时,只有在停止输入后的1秒内才会执行防抖函数中的代码。
如果需要在某些情况下取消防抖操作,可以调用返回的函数的`cancel`方法来清除定时器。例如,点击一个按钮来取消防抖操作:
```javascript
btn.onclick = function() {
debouncedFunction.cancel();
};
```
这样,点击按钮时就会取消之前设置的防抖操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [js防抖功能实现](https://blog.csdn.net/weixin_59554510/article/details/126670272)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
防抖节流如何用代码实现
防抖和节流是前端开发中常用的性能优化技术,主要应用在一些频繁触发的事件中,比如滚动、输入等。它们的主要区别在于防抖是在事件触发后一定时间内没有再次触发才执行函数,而节流是每隔一定时间就会执行一次函数。下面是防抖和节流的代码实现:
防抖:
```
function debounce(func, delay) {
let timerId;
return function() {
const context = this;
const args = arguments;
clearTimeout(timerId);
timerId = setTimeout(function() {
func.apply(context, args);
}, delay);
}
}
```
这里的 `func` 是要执行的函数,`delay` 是延迟的时间。
节流:
```
function throttle(func, delay) {
let lastTime = 0;
return function() {
const context = this;
const args = arguments;
const now = new Date().getTime();
if (now - lastTime >= delay) {
func.apply(context, args);
lastTime = now;
}
}
}
```
这里的 `func` 是要执行的函数,`delay` 是时间间隔。
相关推荐
![](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)