ES6防抖及节流的方法

发布时间:2023年12月28日

ES6提供了防抖函数和节流函数来控制函数的执行频率。

1. 防抖函数(Debounce):在一定时间内,只执行最后一次触发的函数。
```javascript
function debounce(func, delay) {
? let timer;
? return function (...args) {
? ? clearTimeout(timer);
? ? timer = setTimeout(() => {
? ? ? func.apply(this, args);
? ? }, delay);
? };
}
```

使用示例:
```javascript
function handleInput() {
? console.log('Input changed');
}

const debouncedHandleInput = debounce(handleInput, 500);
document.getElementById('input').addEventListener('input', debouncedHandleInput);
```

2. 节流函数(Throttle):在一定时间内,固定间隔执行函数。
```javascript
function throttle(func, limit) {
? let inThrottle;
? return function (...args) {
? ? if (!inThrottle) {
? ? ? func.apply(this, args);
? ? ? inThrottle = true;
? ? ? setTimeout(() => {
? ? ? ? inThrottle = false;
? ? ? }, limit);
? ? }
? };
}
```

使用示例:
```javascript
function handleScroll() {
? console.log('Scrolling');
}

const throttledHandleScroll = throttle(handleScroll, 500);
window.addEventListener('scroll', throttledHandleScroll);
```

这两个函数可以帮助我们优化一些需要控制函数执行频率的场景,比如输入框输入验证、滚动事件处理等。

文章来源:https://blog.csdn.net/m0_72196169/article/details/135270432
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。