js防抖和节流

最新推荐文章于 2024-07-05 11:02:00 发布
最新推荐文章于 2024-07-05 11:02:00 发布
阅读量154 收藏
点赞数
分类专栏： js部分 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dont_recall/article/details/107510705
版权

什么是防抖和节流呢？防抖和节流是闭包最经常被使用的场景，同时，防抖和节流也是前端经常接触到的知识。
首先说一下防抖，什么是防抖呢？简单的来说，防抖就是防止用户恶意的进行一些操作，从而导致处理器负荷过重。那么防抖的原理又是什么呢？就是利用闭包不会被全局污染的特性，使用定时器配合判断，使得用户在某段时间内的频繁操作只能执行一次，用户在此期间每次点击都会导致定时函数重新计时。如图就是一个简单的防抖函数：
在这里插入图片描述
节流简单的来说就是使得用户只能在规定的时间内进行某些操作，一般使用时间戳和定时器来实现，与防抖不同的是，节流的高频触发事件并不会导致定时器的重新计时，事件在每到我们设定的时间的时候触发一次。简单的节流函数如下图所示，
在这里插入图片描述

听，听，听
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS防抖和节流实例解析
10-16
因此，为了避免不必要的性能损耗，JavaScript 提供了防抖和节流这两种处理方式。 防抖（debounce）的原理是在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。这样可以有效地减少事件执行的...
深入了解JavaScript 防抖和节流
10-16
JavaScript中的防抖(debounce)和节流(throttle)是两种常用的优化策略，它们主要用于控制频繁触发的函数调用，以提高性能和用户体验。这两种技术在处理窗口 resize 事件、滚动事件、搜索输入框的实时查询等场景中尤其...
JS 防抖
YuqiRealm.com
10-27 567
没有防抖：var count = 1; var container = document.getElementById('container');function getUserAction() { container.innerHTML = count++; };container.onmousemove = getUserAction;此时，鼠标移动，getUserAction方法就会频
js 防抖
weixin_45734686的博客
12-28 111
function throttle(func, delay) { var timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(tim
温故而知新，详细讲讲JavaScript的防抖与节流
最新发布
共同学习，共同成长
07-05 2484
大家好，我是前端菜鸟的自我修养！今天给大家详细讲讲JavaScript的防抖与节流，包含二者的区别与优缺点、使用场景，并提供具体代码帮助大家深入理解，彻底掌握！
js 防抖
不二喵老师
11-12 142
防抖的本质就是将几秒内触发的事件，统一变成最后触发的事件。也可以说就是定时器的维护，一旦在定时器设置的时间内触发相同事件便重置定时器。 // 包装事件的 todo 函数 function todo (func, delay) { // 定义一个timer let timer = null // 返回一个函数，在函数中调用需要触发的func return function () { // 通过 thi
js防抖
OnceTheKing的博客
10-05 249
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> 抖动：<input type="text" id="input"> <scr...
JS防抖
YuqiRealm.com
06-27 433
在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如：1、window 的 resize、scroll 2、mousedown、mousemove 3、keyup、keydown为了解决这样的问题，一般会有两种方案来解决： 防抖和节流（debounce and throttle）本篇将讲述第一种方案：防抖防抖防抖的原理就是，触发事件的回调函数会在事
js防抖和节流的深入讲解
10-17
JavaScript中的防抖（debounce）和节流（throttle）是两种常见的性能优化技术，用于控制函数的执行频率，防止因频繁调用而导致的性能问题。这两种技术在处理如输入事件、滚动事件、窗口大小调整等场景时尤其有用。 ...
浅析JavaScript 函数防抖和节流
10-15
在实现节流和防抖时，主要的注意点是如何处理函数中this的指向和函数参数。由于JavaScript的setTimeout()会将函数中的this指向window，而我们需要的this并不一定是window，所以通过apply()方法来指定函数执行时的上...
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
js——防抖
weixin_41246825的博客
03-25 2380
防抖（debounce） 监听一个输入框，文字变化后触发change事件，直接用Keyup事件，则会频繁触发change事件；防抖：用户输入结束或者暂停时，才出发change事件 说在前面： 1）aplly用法详解 2）keyup事件 代码实现： 1：未封装版本 const inputDom = document.getElementById('input') let timer inputDom.addEventListener('keyup', () => { if(timer) {
JavaScript 防抖
ASIA_技术
08-20 286
参考：https://github.com/mqyqingfeng/Blog/issues/22 应用：防抖主要用来解决高频事件短时间高频触发，带来的一系列的bug，全部代码和解释经过验证，结合自己的理解 高频事件： window 的 resize、scroll mousedown、mousemove keyup、keydown demo：主要修改事件绑定的触发函数，一步一步深入理解 ...
JS中的防抖
热门推荐
weixin_49592687的博客
04-20 5万+
节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,那这篇文章主要是针对这些同学们的,浅谈一下防抖和节流 防抖: 1. "防抖"是什么 首先,先去解释一下什么叫做防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。 假设: 我有一个<input>标签,并想获得输入时的值,代码是这样的: <body> <input type="text"> <script>
JavaScript 函数防抖
m0_54829066的博客
12-23 1574
如果每次用户输入都立即触发函数，会导致函数频繁触发，浪费资源。使用防抖函数，可以在用户输入后延迟一段时间才触发函数，从而节省资源。需要注意的是，这个防抖函数是基于定时器实现的，所以在使用过程中可能会有一些精度问题。当函数被触发时，防抖函数会延迟执行函数，并且如果在延迟期间内再次触发函数，则会重新计算延迟时间。这样可以避免函数在短时间内多次触发，从而节省资源。JavaScript 函数防抖（debounce）是一种技术，可以防止函数在短时间内多次触发。防抖函数返回一个新函数，在新函数中设置了延迟执行的逻辑。
js 防抖函数
ZhaojunWang的博客
02-15 147
debounce (func, delay) { let timer = null return function (...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { // this, func.apply(this, args) }, delay) } }
js防抖函数
九段刀客的博客
07-02 4162
单位时间内多次触发只会执行一次 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>防抖函数</title> </head> <body> <button id="btn">点击</butto...
js防抖(debounce) 和 节流(throttling)
morensheng的博客
09-30 237
关于js的防抖和节流 看例子： 当鼠标在橙色区域来回移动时 可以看到数值在不可控的快速增加，说明该函数被频繁触发。 对于这种快速连续触发和不可控的高频率触发问题，我们有 防抖(debounce) 和 节流(throttle) 这两种解决方法。 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 防抖函数分为非立即执行版和立即执行版。 //准备工作 let num = 1;//定义一个初始值 let content
javascript防抖
weixin_35752233的博客
12-20 419
JavaScript 防抖是一种技术，用于限制在特定时间内连续触发的事件被多次执行。例如，当用户在输入框中连续输入时，可能会触发多次 keyup 事件。如果我们在 keyup 事件中执行了一些复杂的操作，则可能会导致性能问题。这时，我们可以使用防抖来解决这个问题。 防抖的原理是在事件触发后，延迟一定的时间执行相应的操作，如果在延迟的时间内又触发了相同的事件，则取消之前延迟的执行，重新开始计时。这样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值