前端学习——Js实现防抖、节流函数

最新推荐文章于 2025-05-01 12:32:07 发布
原创 最新推荐文章于 2025-05-01 12:32:07 发布
· 1.5k 阅读 · 3 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文探讨了前端开发中的两种重要优化技术——防抖(debounce)和节流(throttle)函数。防抖函数用于限制事件处理的频率，确保在用户连续操作后的一段指定时间内只执行一次，常用于输入框搜索请求。节流函数则确保在一定时间内函数只执行一次，适用于滚动事件、窗口调整等场景。通过手动实现这两种函数，可以更好地理解和应用它们，提升网页性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 防抖函数（debounce）

功能：当事件被触发N秒之后再执行回调，如果在N秒内被触发，则重新计时。

比如一个输入框，当应用实现防抖函数之后，用户不断输入内容时，函数会一直被触发，则不会发送请求。只有当用户在一段规定时间N内未进行输入操作，才会发送一次请求。如果在N秒内间断的输入内容，且间断的时间小于规定时间N时，则会重新计时且不会发送请求。
这样降低了发送请求的次数，提高性能的同时也提升了用户体验。

手写实现防抖函数：

// func是用户传入需要防抖的函数
// wait是等待时间，若不传参，默认50ms
// 因为闭包，timer将一直在内存中
const debounce = (func, wait = 50)
最低0.47元/天 解锁文章
前端开发中的防抖与节流
EipGemms的博客
09-22 91
防抖和节流是前端开发中常用的优化技术，它们通过控制事件触发的频率，提高页面性能和用户体验。否则，清除之前设置的定时器，并重新设置一个新的定时器，延迟执行回调函数。防抖与节流是前端开发中常用的优化技术，用于控制事件触发的频率，提高页面性能和用户体验。防抖是指在事件被触发后，延迟一定时间再执行回调函数，如果在这个延迟时间内又触发了该事件，则重新计时。节流函数常用于需要控制事件触发频率的场景，例如页面滚动、窗口调整大小等操作，可以利用节流函数避免高频率触发，减少页面响应开销。是要执行的回调函数，
少小白学前端——JS篇（防抖与节流）
Another_World_Naraku的博客
08-09 2597
本文主要是介绍防抖和节流函数，包括如何构建，怎样在react和vue中使用，以及它们的一些应用场景
前端节流函数
weixin_58129544的博客
12-08 731
一文搞懂节流，节流示例，时间戳实现方式，定时器实现方式
前端函数防抖（Debounce）完整讲解 - 从原理、应用到完整实现
最新发布
Micro麦可乐的博客
05-01 5017
在我们日常前端开发中，高频触发的事件（如输入框输入、窗口缩放、滚动事件）可能导致性能问题甚至引发BUG。函数防抖（debounce）是一种常见且高效的性能优化手段，用于限制高频事件触发下的函数调用次数，从而减少不必要的计算、网络请求或 DOM 操作。本文博主将带着小伙伴一起深入解析防抖机制的原理、六大应用场景，并提供可直接复用的代码示例。函数防抖是前端性能优化中的一项基础技术，适用于各种需要限制高频事件调用的场景，通过本文介绍的定时器逻辑或成熟的Lodash 工具库，就能快速落地。
前端-节流函数
LJJONESEED的博客
10-11 279
// 节流 function thro(func, wait) { let timeOut; return function () { if (!timeOut) { timeOut = setTimeout(() => { func(); timeOut = null; }, wait); } ...
前端防抖函数
MenBad的博客
04-07 1317
function debounce (fn,delay){ let timer; return function (...args){ if(timer){ clearTimeout(timer) } timer = setTimeout(()=>{ fn.apply(this,args) .
前端 JS 经典：防抖和节流函数
weixin_64684095的博客
08-12 387
防抖函数（Debounce Function）用于处理频繁触发的事件，确保在事件触发后的一段特定时间内，如果再次触发则重新计时，只有在这段时间内没有再次触发时，才真正执行相应的函数。
前端优化 —— 函数的节流和防抖
github_38140984的博客
10-11 519
原文出自：https://www.pandashen.com 前言 在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口的 scroll、resize，输入框的 keyup、input，以及 click 事件在连续点击时连续发送请求等等，这些情况有些会严重影响前端性能，有些会增加服务器压力，使用户体验大打折扣，而函数节流和防抖就是为了解决这样的问题。 ...
前端面试热点：闭包的应用——防抖与节流
下面是一个节流函数的实现： ```js function throttle(fn, interval) { let timer = null; // 定时器 let firstTime = true; // 判断是否是第一次执行 // 利用闭包 return function() { let args = Array....
前端面试题——防抖和节流（一）
weixin_45460053的博客
09-14 185
主要来看一下面试经常被问道的防抖和节流 1.防抖 防抖在我理解来其实就是事件触发时在n秒后调用事件绑定的方法，如果n秒内再次触发这个事件，那么重新计时。 下面以浏览器的滚动条为例，如果有这样一个需求 ：我需要监听用户浏览器的滚动事件，返回用户距离顶部的距离，那么可以用一下代码实现： function showTop() { let scollTop = document.body.scrollTop || document.documentElement.scrollTop
前端性能优化-如何快速实现函数防抖和节流？
Allen-Ye博客
11-09 313
这些高频率事件有：onscroll oninput resize onkeyup onkedown onkeypress mousedown等等，那么为了解决这些性能问题，函数节流和防抖都是非常有必要的，函数的节流（throttle）和防抖(debounce)也是前端工程师在面试的过程中，经常会被问到的问题，且实现节流和防抖也是对JS高级特性中闭包和this指向等问题的实践。 函数防抖（debounce）：例如百度的搜索，当用户快速输入一个单词的时候，例如用户输入itsource，那么会等待用户完整的输入这
前端工具包之防抖函数
weixin_43416898的博客
12-17 340
前言 我们在开发过程中，总会封装一些公共函数来作为我们的工具来简化代码或者复用代码，为此，我打算整理一下我日常工作中常用的一些封装的工具函数，本篇文章为防抖函数的相关封装 系列文章 1.前端工具包之深浅拷贝 2.前端工具包之日期格式化 3.前端工具包之防抖函数 4.前端工具包之小工具 5.前端工具包之log美化 背景 我们在日常开发中经常会遇到一个需求，比如在滚动事件中需要做个复杂计算或者实现一个...
前端之函数防抖
qq_45217161的博客
03-07 541
函数防抖是一种常用的前端技术，用于限制在短时间内频繁触发某个函数的情况。在函数防抖的实现中，只有在特定的时间间隔内没有触发该函数时，才会执行该函数。这个时间间隔可以通过开发者自己设定，通常是数百毫秒或更长。函数防抖的主要目的是减少不必要的代码执行，优化网页性能，提高用户体验。 在实际使用中，函数防抖通常用于以下情况： 1.输入框自动补全：防止频繁的输入字符导致自动补全不稳定。 2.窗口大小改变事件：防止频繁的窗口大小改变导致不必要的重绘。 3.页面滚动事件：防止频繁的滚动事件阻塞浏览器。 下面是一
前端的防抖和节流
GeorgeZrx的博客
02-01 350
前端的防抖与节流浅层解析
前端优化——节流函数
weixin_34356310的博客
07-10 194
节流函数 在短时间多次触发某个函数的场景下，对执行函数进行节流，节省无效浪费 1. 使用场景 如上图场景下，每当改变搜索框内的内容时，都会实时进行Ajax请求，并把响应数据渲染到页面，，用户为输入想要搜索的内容可能需要多次输入，每次都去请求会造成一些不必要的浪费 所以应在源头写一个节流函数，当在预定的时间内多次改变搜索框内容时，只对最...
JavaScript实现防抖
次顶级的博客
02-01 768
基础实现 function debounce(fn, delay) { // 1.定义一个定时器, 保存上一次的定时器 let timer = null // 2.真正执行的函数 const _debounce = function() { // 取消上一次的定时器 if (timer) clearTimeout(timer) // 延迟执行 timer = setTimeout(() => { // 外部传入的真正要执行的函数
防抖，节流函数实现
yzf_1119的博客
07-11 396
当然 相对应有防抖函数就会有节流函数。一个最基本的防抖函数实现。
防抖节流函数的实现
weixin_43801836的博客
09-08 322
节流函数，一段时间内，只取第一次点击的值，经典实现，点击按钮上传。防抖函数，就是一段时间内点击多次，取最后一次。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值