防抖节流的简单实现

最新推荐文章于 2025-09-26 03:59:12 发布

原创

最新推荐文章于 2025-09-26 03:59:12 发布 · 814 阅读

标签

#css #前端 #javascript

收录于

本文详细介绍了防抖(debounce)和节流(throttle)的概念，并通过实例演示了它们在HTML+CSS中的实现，包括防抖的关键在于clearTimeout重置计时器，以及节流的重点在于控制执行频率。防抖常用于按钮重复点击、文本编辑器实时保存和输入框延迟请求，而节流常见于scroll事件、浏览器播放事件和输入搜索联想。

文章目录

前言
一、防抖
- 测试
二、节流
- 测试
三、防抖的业务场景：
四、节流的业务场景

前言

防抖debounce，好比坐电梯，进来一个人，就得多等几秒。
节流throttle，好比等红绿灯，时间一到，就过一批人。时间没到多来一个人也不影响。

HTML+CSS

  <h2>防抖</h2>
  <div id="div1">0</div>
  <p></p>
  <h2>节流</h2>
  <div id="div2">0</div>

//如果要导入js文件，注意<script>要放在<body>之后
<script src="./index.js"></script>

  div{
   
   
    width: 300px;
    height:150px;
    line-height:150px;
    text-align:center; 
    color: black;
    background-color:green;
    font-size:80px;
    font-weight:bold;
  }

一、防抖

function debounce(fn, wait) {
   
   
  let timer = null
  return

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rashu99

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

防抖和节流

KEEP RUNNING的博客

08-16

3243

在进入学习之前，先想一件事情：从哪听说的这俩名词？我想大部分人应该是在编程中遇到问题后听他人说的。我希望看完这篇博客后能帮你解决实际问题，不只玩玩而已。简单来说，防抖与节流是为了优化性能，提升用户体验的。实现原理都是延迟执行，减少调用次数。不同的是，对于一段时间内的频繁调用，防抖是延迟执行后一次调用，节流是延迟定时多次调用。使用场景：一般为存在用户交互，需要监听DOM元素时。下面我们模拟场景，带你学透防抖与节流防抖模拟场景：一个搜索输入框，在输入后立即（实时）展现搜索结

form表单异步校验防抖

fineworkmanship的博客

10-31

1504

form 自定义防抖校验异步请求接口

参与评论您还未登录，请先登录后发表或查看评论

antd4 form表单使用过程中一些问题

qq_49464155的博客

04-22

2026

1. 表单添加后端校验 2. 表单自动填充密码 3. warning.js:6 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop

React中使用lodash防抖失效解决

weixin_46600931的博客

04-02

1848

因为以案例为例，每次onChange的事件，相当于重新创建了个debounce防抖函数。因此我onChange事件触发10次，就会有10个防抖函数并执行。因此，希望大家不要踩坑。在遇到类似场景，React中使用防抖并且失效的时候，可以用。假设1秒防抖，那么1秒内我输入框假设输入了10个字符。这显然并不是我们想要的防抖效果。那么在1秒后，只会输出一次结果。假设此时触发了10次onChange事件。的作用也显而易见，咱们用通俗的话来说就是。onChange如果感应到了N次。我们就会输出N次结果。

typescript实现简单的防抖与节流

wz9608的博客

02-27

4180

typescript实现简单的防抖与节流文章目录typescript实现简单的防抖与节流前言一、防抖和节流是什么？二、函数实现3.使用示例前言前端开发中经常会遇到防抖和节流的业务需求，用原生js写防抖和节流会受到typescript限制提示：以下是本篇文章正文内容，下面案例可供参考一、防抖和节流是什么？防抖：使传入一个函数在n秒后执行，如果在n秒内又触发防抖函数，则定时器重0开始计时节流：使一个函数间隔n秒执行一次二、函数实现 /** * 防抖函数 *

防抖和节流的简单实现

weixin_46663461的博客

07-30

832

防抖何为防抖:你尽管触发事件,我一定会在事件n秒后去执行事件,你不断触发了事件,那么我就以你的每次触发时间为最新,重新计时,之前的都不算简单实现原理思路:(这里以点击不断的点击事件为例子) 用户每次点击按钮,都会开始重新计时,所以这里就需要一个定时器,每次用户点击,都要去清除定时器,这时候我们需要将定时器的id保存起来,用以清除定时器,这里就需要考虑这个定时器的id保存在哪里了,这个定时器的id应该被保存起来的,不能我们每一给触发事件,就重新赋值,这样就不行了,所以我们考虑用闭包来保存这个值,用户每次点

节流防抖最简单的实现

小白目的博客

07-20

587

用一个变量在vue中实现节流防抖的功能

防抖节流简单实现

Wsnbb007的博客

02-28

275

防抖节流的理解和简单实现

v-model --双向数据绑定

qq_45802159的博客

01-03

3499

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

react antd input防抖

想快快长大的博客

03-17

5233

const debounce = (fn, wait) => { let timeout = null; return function(input) { input.persist(); if (timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait,...

JS的节流与防抖的目的，区别以及实现方式（关注收藏，持续更新）

王春燕的博客

04-20

9306

一、节流和防抖的目的：都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象二、节流和防抖的区别：防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次三、节流和防抖的详解防抖 debounce（设置1分钟只会执行一次，如果1分钟内又多次触发，会从再次触发开

react频繁使用的js(input防抖请求、节流)

weixin_43845137的博客

09-09

1230

【代码】react频繁使用的js(input防抖请求、节流)

前端常用算法（一）：防抖+节流

qq_45796592的博客

08-17

3530

防抖和节流详细教程

antd select 模糊搜索节流

weixin_42327537的博客

05-17

866

import { debounce } from 'lodash'; //debounce 关键字 getMasterWorkerInfoFUN = debounce(value => { const { initParam } = this.state; initParam.fteacherJobNo = value; getMasterWorkerInfo(initParam); }, 500);

防抖与节流实现

Wrj6811的博客

07-07

1428

本文借鉴于https://segmentfault.com/a/1190000018428170 防抖和节流是开发中经常遇到的需求，先看下定义：一、防抖对于短时间内连续触发的事件（比如页面滚动事件），防抖的含义就是让某个时间期限（如1000毫秒）内，事件处理函数只执行一次 function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ .

3秒防重复提交！Ant Design表单防抖与节流实战指南

最新发布

gitblog_00747的博客

09-26

1012

你是否遇到过用户疯狂点击提交按钮导致的表单重复提交问题？或者实时搜索时输入框频繁触发接口请求导致的性能瓶颈？作为企业级UI组件库，Ant Design提供了完善的表单控制方案，但90%的开发者都没充分利用其内置的防抖与节流能力。本文将通过3个实战场景，教你用**20行代码**彻底解决表单提交的性能与数据一致性问题。读完本文你将掌握： - 3种表单高频触发场景的优化方案 - Ant Design...

JavaScript防抖和节流

zem

03-13

394

防抖和节流都是优化的方式，经常听见却又不是特别清楚，查阅资料和写一些代码后写篇推文来记录一下防抖理解概念防抖的简单理解为在短时间内多次触发一个操作（执行某个函数），只触发最后一次操作，这里的短时间是自己定义的。这样的好处在于短时间内多次触发同一函数可能只有一次是需要的，就如在搜索框输入内容时自动匹配相似的内容，如果按下每个按键就触发一次，未免有些低效率。例子 <!DOCT...

公开资料整理_整理了1000+数据分析资料！包含分析案例、指标体系、简历模板...

weixin_39722917的博客

11-30

1204

上一次的10G精选数据分析资料获得了很多朋友的好评。最近有些朋友说资料不够用了，催老李整理一些新的资料。所以这次，我又陆续花了一个多月的时间，整理了一份全新的数据分析资料，包含1000多个文件，比之前的更加实用、全面。包含：数据分析案例、业务指标体系、数据分析岗位真实参考简历、数据分析笔面试题库、数据分析工具安装包、多行业数据集、多行业Excel模板……等等资料从入门到实操到求职，全部为你准备好了...

【转载】防抖和节流

mus-z的博客

04-05

394

转载：https://www.jianshu.com/p/518607d2f84b 防抖和节流-是针对响应跟不上触发频率这类问题的两种解决方案 debounce，去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 debounce的特点是当事件快速连续不断触发时，动作只会执行一次。延迟debounce，是在周期结束时执行。但当触发有间...