写一个节流函数和防抖函数
时间: 2024-09-25 21:06:15 浏览: 32
简单实现节流函数和防抖函数过程解析
在JavaScript中,节流(Throttle)和防抖(Debounce)是两个常见的性能优化技术,用于限制连续事件的执行频率。下面我会为你展示这两个函数的基本实现:
**1. 节流 (Throttle)**:
节流函数会保证一个函数最多只能在给定的时间间隔内运行一次,即使有更多调用也只会等到下一次时间间隔到来时执行。
```javascript
function throttle(func, delay) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}
```
**2. 防抖 (Debounce)**:
防抖函数则是在最后一次触发后等待一段时间再执行,如果在这段时间内再次触发,则重新计时。这样可以防止快速连续触发导致频繁执行。
```javascript
function debounce(func, delay) {
let timeout;
return function() {
const context = this;
const args = arguments;
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}
```
你可以按照这些函数定义来在实际项目中使用它们,比如控制用户的输入行为,避免过度频繁地发送请求等。
阅读全文