防抖与节流的封装函数与使用详解
时间: 2023-09-01 22:07:52 浏览: 64
防抖和节流是前端开发中常用的两种性能优化方式,它们可以减少事件的触发次数,提高页面的性能。下面是防抖和节流的封装函数与使用详解。
## 防抖
防抖是指在事件触发后等待一段时间再执行回调函数,如果这段时间内事件又被触发了,则重新计时。这种方式可以用来解决一些频繁触发的事件,比如窗口大小改变、输入框输入等。
### 封装防抖函数
```javascript
function debounce(func, delay) {
let timer;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
```
### 使用防抖函数
```javascript
const button = document.querySelector('button');
function handleClick() {
console.log('clicked!');
}
button.addEventListener('click', debounce(handleClick, 500));
```
## 节流
节流是指在一段时间内只执行一次回调函数,如果这段时间内事件被触发多次,则只有第一次会执行回调函数。这种方式可以用来解决一些频繁触发的事件,比如滚动事件、鼠标移动事件等。
### 封装节流函数
```javascript
function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const nowTime = Date.now();
if (nowTime - lastTime > delay) {
lastTime = nowTime;
func.apply(this, args);
}
};
}
```
### 使用节流函数
```javascript
window.addEventListener('scroll', throttle(handleScroll, 500));
function handleScroll() {
console.log('scrolling!');
}
```
以上就是防抖和节流的封装函数与使用详解,希望对你有所帮助。