JavaScript-防抖函数的实现

最新推荐文章于 2024-04-01 19:36:13 发布
最新推荐文章于 2024-04-01 19:36:13 发布
阅读量412 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42181069/article/details/121928573
版权

1、对防抖函数该怎么理解

日常小案例：

老师在上完课后给大家【五分钟】询问大家有没有什么问题要问

如果在【五分钟】时间内，没有问题要问，那么就下课了(相当于执行事件了）

如果在此期间，小非来问 问题，并且帮她解答了，解答完后，会再等【五分钟】看看还有没有别的同学问问题

如果在此期间，小凡来问 问题，并且帮她解答了，解答完后，会再等【五分钟】看看还有没有别的同学问问题

如果我等待超过了5分钟，那么就下课了(相当于执行事件了）

所以用三句话理解就是：

  1. 当事件触发时，相应的函数并不会立即触发，而是 会等待一定的时间
  2. 当事件密集触发时，函数的触发会被频繁的推迟
  3. 只有等待了一段时间也没有事件触发，才会真正的执行响应函数

2、防抖的应用场景

  • 输入框中频繁的输入内容，搜索或者提交信息
  • 频繁的点击按钮，触发某个事件
  • 监听浏览器滚动事件，完成某些特定操作
  • 用户缩放浏览器的resize事件

3、防抖的简单实现

//简单实现
functi
最低0.47元/天 解锁文章
小斯不斯
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
防抖函数的实现
孙叫兽的博客
11-18 6966
防抖函数的定义是当事件触发完成之后再延迟触发，并且只触发一次；如果在触发完成之前再次触发，则会再次刷新延迟；简单理解为（如果事件不触发即不执行，并且只会执行一次，就是定时器最后走的那一次） 　举个例子：假如有个弹簧，你一直往下按压只要你不松手就是不会弹出的，弹簧只有在你松手的那一瞬间才会弹出去；防抖函数也是如此，只要事情触发没有结束是不会执行的，只有在事件触发结束后延迟执行一次； //定义方法即要做的事情 function fun(){ console.log('onresize') ..
javascript防抖函数debounce详解
10-16
以下是两种常见的防抖函数实现： **实现1**： ```javascript function debounce(fn, wait = 50) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => {...
手把手教你实现一个防抖函数(debounce)
fang_my的博客
11-30 5539
闭包不另开一篇文章讲解是讲不完的，并且阮一峰阮大的闭包讲解的已经很好了，我就不献丑了） 对于现在的场景简单来说，你可以这样理解。那么我们的 防抖 函数在这里的作用其实就是帮你把这个函数包装一下的意思，它并不会直接影响这个函数的内部逻辑，就像你的礼物包装一层包装纸🎁后，它本身是没有发生任何变化的。我仅仅只是想最后搜索 hanzhenfang 这几个关键词，但是我在输入每一个字符的时候，都会去后端请求一次，数据量小还好，如果数据量过大的话，由于前几次的请求都是毫无意义的，势必会造成性能和资源上的浪费。
【从基础概念到手写】防抖-节流函数的基本实现和补充
weixin_50926010的博客
05-18 730
【从基础概念到手写】防抖-节流函数的讲解和手写实现
防抖c语言,花式解说防抖函数debounce的实现
weixin_39601929的博客
05-20 620
歪式絮叨：原本打算只用一篇文章总结下防抖和节流的，但是写着写着发现挺有意思的。所以准备会分成 3-4 篇来写了，单独的防抖和节流的实现，然后在去分享一下知名库的源码。今天先跟歪马一起看看防抖的实现吧。其他内容敬请期待~！歪老师：“马同学，防抖和节流你知道吗？起来说一下。”马同学：“老师，我不知道呀，都没听说过。”歪老师：“好吧，那今天我们就先来讲讲防抖吧。先从基本的概念以及使用场景说起”。一、概念...
如何实现一个防抖函数？
kiku
11-05 1705
在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、scroll mousedown、mousemove keyup、keydown …… 为此，我们举个示例代码来了解事件如何频繁的触发： <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" conte
js代码-防抖debounce实现
07-16
以下是一个简单的防抖函数实现示例： ```javascript function debounce(func, wait) { let timeout; return function() { const context = this; const args = arguments; clearTimeout(timeout); timeout = ...
js代码-防抖的实现
07-15
下面是一个简单的防抖函数实现示例： ```javascript function debounce(func, wait) { let timeout; return function() { const context = this; const args = arguments; clearTimeout(timeout); timeout = ...
js代码-防抖函数（立即执行和非立即执行）
07-15
JavaScript中的防抖函数（Debounce）是一种优化技术，用于限制函数在特定时间间隔内的执行次数。这在处理事件监听，如窗口滚动、输入框输入等高频触发的场景中非常有用，可以有效避免性能问题和不必要的计算。防抖...
JS中防抖函数介绍与实现（秒懂如何手写防抖）
最新发布
百赢出品，必属精品
04-01 1349
函数防抖是一种用于限制函数执行频率的技术。在JavaScript中，函数防抖常用于处理频繁触发的事件，如浏览器窗口的resize事件、滚动事件、输入框的输入事件等。它通过延迟函数的执行来确保在一定时间内只执行一次。可以避免频繁触发事件造成不必要的资源消耗或执行结果混乱的情况，而只关注最后一次触发事件的结果。1.当事件被触发时，不立即执行事件处理函数，而是等待一段时间（延迟时间）。2.如果在这段时间内事件再次被触发，则重新计时，延迟时间重新开始计算。3.直到延迟时间内没有再次触发事件，才执行事件处理函数。
JS防抖函数的实现(巨详细,秒懂)
热门推荐
qq_63299825的博客
05-25 1万+
在一定的时间间隔内,如果没有再次触发该函数,那么才会去执行函数体内的代码(例如发送网络请求)。
防抖的两种实现方法
qq_51387458的博客
04-01 528
防抖的两种实现方法
JS高级——防抖函数
@SCY
02-26 2666
防抖函数具体实现过程
input change 延时 防抖
葡萄味橙子的博客
05-23 2469
原作者: 零零博客 https://blog.ll00.cn/index.php/archives/62/ 让input propertychange事件时间延时执行 在使用input propertychange事件时，遇到一个问题。我输入一个字时，会重复执行五六次事件，事件里又包含了网络请求，体验非常差。经过搜索，找到了解决办法，详情如下。 代码 // 监听textarea的输入 $(do...
防抖函数JavaScript
m0_51658494的博客
04-11 6654
防抖函数 先总结下对防抖函数的理解： 防抖函数就是防止用户进行一些点击事件或者输入文字时，对应绑定的事件发生多次 比如我在点击后发送ajax请求，但是我联系按了两次，然后请求就发送了两次 或者在输入框中打字时候，还没有结束打字就已经发送了请求 （当然有些搜索框正需要这样的功能，但是也是需要限制，肯定也得等完整的字符输入才显示推荐） 防抖函数具体实现： 就是用一个函数把原本要执行的事件函数包裹起来，利用setTimeout函数来规定执行的时机，同时把原本绑定的事件函数获得的参数全部给这个函数，因为会涉及到t
防抖和节流及多种实现方式，我们可以使用防抖和节流来限制函数的调用次数，从而提高性能和用户体验
m0_64342982的博客
04-24 1200
节流的实现思路是：每次事件被触发时，如果函数没有在指定的时间间隔内被调用过，则调用函数并设置一个计时器，在指定的时间间隔内不再触发事件。防抖的实现思路是：每次事件被触发时，设置一个计时器，在指定的时间间隔内，如果该事件被再次触发，则清除计时器并重新开始计时，直到指定的时间间隔内没有事件触发为止，然后调用函数。这个函数中， last 记录上次执行函数的时间戳，每次事件触发时，计算当前时间戳与上次执行函数的时间戳的差值，如果超过指定的时间间隔，则执行函数并更新 last。否则等待指定的时间间隔后再执行。
实现一个防抖函数
小卡酷谋的博客
07-27 258
immediate 控制执行第一次还是最后一次，false表示只执行最后一次。// 如果我们想要执行最后一次，那就意味着无论我们当前点击多少次，前面的N-1次都无用。// 所谓的防抖效果我们想要实现的就是有一个“人”可以管理handle的执行次数。// 当前我们执行了按钮点击之后就会执行 ...返回的proxy。* handle 最终需要执行的事件监听。* wait 事件触发之后多久开始执行。// 参数类型判断及默认值处理。// 定义事件执行函数。
防抖和节流函数的实现
qq_39908328的博客
04-13 9694
防抖和节流函数的实现 首先我们需要对防抖和节流函数作一个概念的区别：因为这两者是不同的一个概念 一、防抖和节流函数的基本认识 1.防抖函数 防抖函数相当于是对触发的数据做一个延迟处理。比如我们平时在使用搜索框时，我们一输入内容就会发送对应的网络请求，如果我们后面一直有在输入内容，那么就会一直发送网络请求。正确的做法应该是在我们输入期间不发送网络请求，当我们输入完成后在发送网络请求。 2.节流函数 节流函数相当于是我们在一个时间段内一直频繁的触发数据请求，但是数据的请求还是根据设定的一个频率来进行响应的。比
JavaScript 防抖函数的方法
08-03
JavaScript 防抖函数是一种在一段时间内阻止函数的执行的方法。它的原理是在执行函数之后设置一个定时器，在定时器到期之前如果再次触发函数的执行，就会重置定时器，直到定时器到期才会真正执行函数。这样可以有效...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值