前端必会——防抖

最新推荐文章于 2024-01-29 18:57:12 发布
最新推荐文章于 2024-01-29 18:57:12 发布
阅读量1.1w 收藏 15
点赞数 6
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57712926/article/details/119544304
版权

目录

前言

本文讲解一下js中防抖思想，下方有实现防抖的基本代码，可以复制到自己的编辑器看看效果哦。也有实际的应用场景，会HTML、CSS、JQuery以及使用jQuery发送Ajax请求即可。

一、什么是防抖？

防抖阻止了事件的多次调用，规定时间内只会执行一次。

二、防抖解决了什么问题

假设一个用户高频点击一个按钮，点击按钮后会向后台发送请求，如果不使用防抖，就会发送许多重复的Ajax请求，造成服务器压力。使用防抖后，规定时间内，只会发送一次Ajax请求，可以有效地减缓服务器的压力。

三、实现防抖的基本代码

通过监听输入框的输入事件，通过定时器每隔一秒获取一次用户输入的内容，如果一秒内用户又进行了输入，清除上一次的定时器，重新计时一秒，计时结束后将用户输入的内容打印到控制台。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>debounce</title>
  </head>
  <body>
      <input type="text" placeholder="请输入您要搜索的内容~" />
    <script>
      let timer = null
      $('input').on('input',function(){
     
          console.log('没有防抖',$('input').val())
          // 向清除一次定时器
          clearTimeout(timer)
          // 重新开启一个定时器
          timer = setTimeout(() => {
最低0.47元/天 解锁文章
<a href="#">leo</a>
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
彻底理清防抖和节流（前端性能优化）
夏日漱石的博客
04-28 1654
前端有很多性能优化的方式，面对用户与网页的频繁交互，如输入框打字、按钮点击、滚动事件等，我们如何确保应用的响应既迅速又高效？ 大家应该都简单了解防抖和节流本质上就是优化这种高频率执行代码的手段，那么他们之间有什么区别呢？应该如何正确根据具体的场景来选择使用呢？
前端的防抖和节流
qq_36660833的博客
06-06 1337
在前端开发中，防抖（debounce）和节流（throttle）是常用的优化技术，用于控制事件的触发频率，以提高性能和用户体验。它们的作用是限制函数的执行次数，特别是在处理频繁触发的事件（如窗口调整、滚动、输入等）时。需要注意的是，防抖和节流都是通过包装原始函数，返回一个新的函数来实现的。使用节流的主要目的是限制函数的执行频率，特别是当处理一些连续触发的事件时，如窗口滚动事件。函数，如果在延迟期间再次调用了该函数，会清除之前的定时器并重新设置新的定时器。，并返回一个新的函数。，并返回一个新的函数。
js 防抖、节流
努力
10-22 232
作用： 防抖和节流本质都是为了优化高频率执行代码或任务的一种手段。 比如：浏览器的滚动事件(scroll)、推拽(mousemove)、输入框(input)等事件在触发时，会不断地调用绑定在事件上的回调函数，导致浪费资源、拉低性能。 采用防抖(debounce)和节流(throttle)的方式来减少调用频率也就是限制此类事件调用回调的次数就可以解决。 防抖节流定义： 节流： 在规定时间内连续、频繁的触发事件，只会执行最后一次触发的事件处理函数。 防抖： 在规定时间后才去执行该事件，如果在
关于防抖和节流在前端开发中的应用
kirinlau的专栏
09-29 850
防抖和节流都是为了优化用户的高频操作导致的问题
消灭前端闪烁魔鬼：Vue中的防抖术
前端全栈大佬
11-18 5250
本文将深入研究Vue中的防抖动技术。我们将首先介绍什么是防抖动，以及它在前端开发中的重要性。然后，我们将详细讨论Vue中如何实现防抖动，以及在实际项目中如何应用这一技术来优化用户体验。
前端优化之节流防抖
单眼皮丶儿的博客
11-23 2093
【代码】前端优化之节流防抖。
前端必会编程题.doc
04-09
在前端开发中，掌握一些核心的编程技巧是至关重要的，这些技巧可以帮助我们编写更高效、更可靠的代码。以下是一些从文件中提取的关键知识点及其详细解释： 1. **大数相加**：JavaScript 的 Number 类型存在最大安全...
前端的js防抖代码示例
02-18
前端js防抖代码示例
javaScript——函数防抖
01-03
函数防抖什么是函数防抖函数防抖代码 什么是函数防抖 函数防抖代码 //普通写法 var timer = null; var timerFunc = ()=>{ console.log(移动时间:+new Date().getTime()); } function moveFunc(){ if(null != ...
Vue中使用防抖与截流
01-17
而当我们处理用户输入或者页面交互时，为了优化性能和避免不必要的计算，常常会用到“防抖”（debounce）和“节流”（throttle）技术。这两个概念在JavaScript中尤为常见，尤其在事件监听和响应式编程中发挥着重要...
前端工程师面试必备开发知识视频教学合集
09-14
前端面试题 类型的传遇1.avi 06.面试题_去掉 数组中重复性的 数据avi 11.面试题_背景 图片距离.avi 类型的传递2.avi 07.面试题_1物理 像素.avi 12.面试题js综 合面试题.avi 轮峰命名的转换. avi 08.面试题_flex ...
前端小技巧: 区分防抖和节流的方法
Wang的专栏
11-10 104
【代码】前端小技巧: 防抖和节流的区别。
【前端】防抖和节流
最新发布
lcukyNwa的博客
01-29 720
项目中遇到的场景，需要鼠标悬浮在图表的时候，将ToolsTip里的数据回显到头部，由于是2张图表，无法直接赋值，必须通过请求后端接口，由于ToolsTip里的Api是鼠标放上面就会触发，就会出现发起了N个请求，这时候就可以利用防抖，只有一定时间没有动作，才会请求后端接口。防抖用于限制连续触发的事件的执行频率。当一个事件被触发时，防抖会延迟一定的时间执行对应的处理函数。如果在延迟时间内再次触发了同样的事件，那么之前的延迟执行将被取消，重新开始计时。监听echarts的tooltip 事件。
前端 JS技巧 防抖
qq_49193551的博客
05-10 298
防抖是指在某个事件被触发后，延迟一定时间再执行，若在这个时间内再次触发，则重新计时。主要用于解决一些频繁触发的事件，如窗口大小改变、搜索框输入等，以减少事件的处理次数。又或者说再失误操作的时候请求多次发生，这样我们就要为那些事件套上防抖的代码。函数是防抖函数的实现，它返回一个新的函数，在新函数中，首先清除之前的计时器（如果存在的话），然后设置一个新的计时器，等待。然后，我们将防抖函数和搜索框输入事件绑定在一起，即。函数，每当输入框的内容发生变化时，就会触发。毫秒后执行传入的函数。函数，实现防抖的效果。
前端的防抖和节流的应用场景以及使用
zhou_ya_nan的博客
08-09 1168
防抖和节流 1.什么是防抖 防抖：顾明思议，一次只有单一的请求，我们举个例子，例如：喜欢打王者荣耀的朋友都知道，我打王者荣耀好家伙没血了，我要回城，这个时候我点击一次，就开始我的进度条回城，但是中途万一不小心重新点击，那回城就又开始重头算。要是中间突然有个人打你一下，你也回不了城。 js中有哪些页面使用场景是关于防抖的呢(第一个经常遇到)： 1.登陆，发短信（倒计时），防止用户点击过快，以至于发送多次请求，然后这里不是吐槽后端啊！本人亲测没错登陆接口单击20次，服务器挂了。。。当然这个是老项目。所以我们为了
vue按钮防抖
qq_39162196的博客
10-09 508
一般来说前端都需要做按钮防抖避免一个时间被重复触发，首先可能会出现bug，消耗服务器性能，用户体验也不是很好。
前端性能——JS的防抖和节流是什么？
AlexGeek
10-23 7027
数个月之前，在一次前端的性能优化中，接触到了JS中防抖和节流，一开始还不明白他们的应用在哪里，可后来才知道，这是前端中最基础的性能优化，在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往...
Web前端性能优化——防抖处理/节流处理/图片懒加载
qq_50613817的博客
06-24 345
前端性能优化 没有标准答案，越全面越好，如果做不到，就尽量从前端角度考虑 原则 多使用内存，缓存（以空间换时间，这种思想也适用于后台）访问频繁，变化不大 减少 CPU 计算量，减少网络加载耗时 入手 1、 提升加载速度 减少资源体积：压缩代码（如QQ的图片压缩等） 减少访问次数：合并代码，SSR服务端渲染、缓存等 使用更快的网络：CDN CSS 放在 head，JS 放在 body 最下面 尽早开始执行 JS，用 DOMContentLoaded 触发 懒加载（图片懒加载，上滑懒加载） 2、 提升渲
promise前端防抖
09-07
前端防抖是一种常用的技术，用于减少事件触发的频率，防止频繁触发回调函数。在Promise中实现前端防抖的方法如下： ```javascript function debouncePromise(fn, delay) { let timerId; return function (...args) { return new Promise((resolve, reject) => { clearTimeout(timerId); timerId = setTimeout(() => { try { const result = fn.apply(this, args); resolve(result); } catch (error) { reject(error); } }, delay); }); }; } ``` 这个 `debouncePromise` 函数接受两个参数：`fn` 是要防抖的函数，`delay` 是延迟时间。它返回一个新的函数，每次被调用时会设置一个定时器，在延迟时间内没有再次调用时，才会执行原始函数，并返回一个Promise对象。 你可以将要防抖的函数作为参数传递给 `debouncePromise` 函数，然后调用返回的函数来进行防抖处理。这样做可以确保在一段时间内只触发一次函数执行，减少不必要的计算和请求，提高性能和用户体验。 示例用法： ```javascript // 要防抖的原始函数 function fetchData() { // 异步操作，例如发送请求获取数据 // ... } // 使用防抖包装原始函数 const debouncedFetchData = debouncePromise(fetchData, 500); // 调用防抖函数 debouncedFetchData().then((result) => { // 处理结果 }).catch((error) => { // 处理错误 }); ``` 在上述示例中，`fetchData` 是需要防抖的原始函数，通过 `debouncePromise` 包装后返回的 `debouncedFetchData` 函数来进行防抖处理。每次调用 `debouncedFetchData` 函数时，都会延迟一段时间后执行 `fetchData` 函数，并返回一个Promise对象来处理异步结果。 注意，这里使用了箭头函数和展开运算符来传递参数，确保原始函数的参数能正确传递给防抖函数和回调函数。你可以根据实际需求进行调整和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值