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

```

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

相关推荐
weixin_456907414 分钟前
【html+Tss 故障排查】链20230304 最详细解析之像素已拉取,容器仍起不来(含命令清单)
前端·html
Ulyanov15 分钟前
基于Impress.js的3D概念地图设计与实现
开发语言·前端·javascript·3d·ecmascript
jiayong2316 分钟前
Vue 3 面试题 - TypeScript 与工程化
前端·vue.js·typescript
小白菜学前端19 分钟前
Git 推送 Vue 项目到远程仓库完整流程
前端·git
A南方故人20 分钟前
一个用于实时检测 web 应用更新的 JavaScript 库
开发语言·前端·javascript
悟能不能悟21 分钟前
postman怎么获取上一个接口执行完后的参数
前端·javascript·postman
小程故事多_8022 分钟前
穿透 AI 智能面纱:三大高危漏洞(RCE/SSRF/XSS)的攻防博弈与全生命周期防护
前端·人工智能·aigc·xss
koiy.cc24 分钟前
新建 vue3 项目
前端·vue.js
虹科网络安全25 分钟前
艾体宝新闻 | NPM 生态系统陷入困境:自我传播恶意软件在大规模供应链攻击中感染了 187 个软件包
前端·npm·node.js
qq_124987075344 分钟前
基于springboot+vue的家乡特色旅游宣传推荐系统(源码+论文+部署+安装)
java·前端·vue.js·spring boot·毕业设计·计算机毕设·计算机毕业设计