ES6防抖及节流的方法

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);

```

  1. 节流函数(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);

```

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

相关推荐
xuedaobian2 分钟前
Markdown 宽表格突破容器边界滚动方案
前端·css
再吃一根胡萝卜2 分钟前
[ECharts] Instance ec_1234567890 has been disposed
前端
德育处主任2 分钟前
『NAS』中午煮什么?Cook
前端·docker
董世昌413 分钟前
js遍历数组和对象的常用方法有哪些?
开发语言·javascript·ecmascript
清风乐鸣3 分钟前
Zustand 、Jotai和Valtio源码探析
前端
LawrenceLan4 分钟前
Flutter 零基础入门(八):Dart 类(Class)与对象(Object)
前端·flutter
小oo呆14 分钟前
【学习心得】Python的Pydantic(简介)
前端·javascript·python
funnycoffee12322 分钟前
F5 Big IP如何设置web和SSH登录的白名单
前端·tcp/ip·ssh
JarvanMo30 分钟前
国产 App,求你放过我的 iPhone 电量吧!
前端
先飞的笨鸟33 分钟前
2026 年 Expo + React Native 项目接入微信分享完整指南
前端·ios·app