一文带你简单了解防抖和节流

已于 2023-03-20 19:08:31 修改
阅读量356 收藏
点赞数 3
文章标签： javascript 开发语言 ecmascript
于 2022-11-01 23:36:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdRuiRui/article/details/127643332
版权

一、防抖和节流的定义

        防抖和节流，本质上就是优化高频率执行代码的一种手段。

        浏览器的resize、scroll、keypress、mousemove等事件在触发时，会不断地调用绑定在事件上对应的回调函数，导致资源被极大的浪费，大大降低前端的性能。所以为了优化体验，我们需要对这类事件进行调用次数的限制，于是就用到了防抖（throttle）和节流（debounce）的方式来减少事件的调用频率。

        防抖是在一段时间后再执行操作，若在一段时间内被重复触发，则重新计时。
        节流是在一段时间内只运行一次，若在一段时间内重复触发，只有一次生效。  

二、防抖和节流的区别

        两者的相同点：

        （1）、都可以通过定义setTimeout定时器来实现；

        （2）、他们的目的是同一个：为了降低回调函数执行的频率，节约计算资源。

        两者的不同点

        （1）、防抖关注一定时间连续触发的时间，并且只在最后执行一次方法；

                        节流一段时间内只会执行一次；

        （2）、函数防抖是在一段连续的操作结束之后去处理回调函数，利用clearTimeout和setTimeout方法去实现；

                    而函数节流则是在一段连续操作中每隔一段时间只会执行一次，一般在频率较高的事件中使用函数节流来提升性能，优化操作

emoRui77
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单版的防抖和节流
weixin_49343253的博客
06-30 301
防抖和节流都是为了解决响应速度更不上触发频率，而出现的卡死，不流畅问题。 防抖：事件在触发n秒后会执行，如果n秒内事件再次被触发则重新计时 //fn要进行防抖的函数 function debounce(fn,delay){ let timeout = null, //设置定时器标识存放定时器 return function(){ //闭包保存定时器 clearTimeout(time...
最简单的防抖和节流
weixin_51012534的博客
04-13 687
最简单的防抖和节流
最简单的防抖和节流；这都不会?
weixin_50307964的博客
10-18 308
**防抖:** 在一定时间内执行最后一次操作; **节流:** 在一定时间内执行一次操作;
极其简单的节流与防抖，一看就懂
weixin_44235659的博客
12-26 348
简单易懂的前端节流防抖函数
节流和防抖的简单理解
Su__py的博客
05-05 666
1、节流的理解：节流就是利用定时器，在规定的时间内只执行一次需要执行的事件。过程就是第一次点击的时候，判断的值为空，没有进行return事件，将定时器赋值给判断的值，如果再次点击，就会执行return事件，因为函数是常驻内存，所以在规定时间内的规定事件不会执行点击事件。 let button = document.getElementById('button') let timer; button.onclick = function () { if (timer) ret
防抖与节流的简单理解
LK_315的博客
09-06 509
通过一个例子来简单理解节流与防抖
一文带你了解半导体硅晶片
01-20
硅片尺寸的扩大和芯片线宽的减小是集成电路行业技术进步的两条主线。目前12寸硅片的出货量占比超过60％，是目前主流的硅片尺寸。 　半导体硅片通常由高纯度的多晶硅锭釆用查克洛斯法（CZ Method）为主拉成不同电阻...
一文带你了解云原生
02-23
自进入云计算时代后，大量的新概念、新技术如雨后春笋般的涌现出来，从早期的openstack、IAAS平台，到中期的容器技术、微服务架构，再到现在的servicemesh服务网格技术、serverless无服务器架构、云原生技术，可谓在...
一文带你了解MEMD技术
01-20
机电系统（MEMS）是一种技术，其 一般的形式可以定义为使用微细加工技术制成的小型机械和机电元件（即设备和结构）。MEMS 器件的关键物理尺寸可能从尺寸范围下端的一微米以下到几毫米不等。同样，MEMS 装置的类型...
简单易懂的函数防抖与节流
俗人
09-28 313
1.防抖（debounce） 一个函数被不断触发，在连续触发期间不执行函数，在结束触发后指定时间后执行函数。 看代码： function de(fn,interval){ let timer; return function(){ clearTimeout(timer); timer=setTimeout(()=>{ fn.apply(this,arguments); },interval) } } //调用 de(fun,2000); 2.节流(throttle) 在
防抖函数 节流函数
weixin_34195142的博客
05-30 382
节流函数 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 function throttle(fun, delay){ let pre = Date.now() return function() { let now = Date.now() let arg = arguments if (now - pre > ...
简单认识 防抖与节流
qq_56588657的博客
05-12 133
防抖 防抖策略： 是当事件被触发后，延迟 n 秒后再执行 回调，如果在这 n 秒内 事件又被触发，则会 重新计时 防抖的常用场景： 用户在输入框中连续输入一串字符时，可以通过 防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求此时，节约请求资源 // 定义 计时器 变量 var timer = null // 定义 防抖 的函数 function debounce(key) { timer = setTimeout(function() { /* 执行代码片段 */ },500)
防抖和节流的最简单理解
weixin_45936275的博客
01-17 356
回城的时候取消，是防抖 限制攻击的频率，是节流
防抖和节流的简单理解
m0_58974838的博客
06-20 99
在开发页面的时候经常会绑定一些不停触发的事件，比如 input 输入事件和 scroll 滚动事件，这些事件，只要触发事件就会在一段时间内连续触发，导致页面负载家中，影响体验，所以我们不希望这些事件在一段时间内不停的做一些重复而且毫无意义的操作，这时我们需要用 防抖和节流限制这些事件的调用频率，并且不影响体验。 防抖(debounce) 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 ...
简单的防抖节流操作
阳阳的博客
04-27 275
目录 防抖 为什么需要防抖 环境 节流 环境 防抖 为什么需要防抖 环境 1、在开发过程里面 有没有遇到过 输入框的输入时间 “input” 每次输入都会触发一次对应的事件，这样不仅浪费性能，个人感觉体验还不是特别好 没输入一次就出发一次，这样的情况，如果涉及大量数据的匹配筛查，是不是就会特别的难受，我都还没有指明我要筛选哪些数据，就开始筛选，不够精确，增加了界面渲染和后端服务器的压力 2、那有没有呀可以等我输入完了再做判断筛选 或者我不输入了再进行筛选的操作 ？？？还真的有：那
节流与防抖 简单理解及应用
weixin_46505834的博客
06-30 197
节流与防抖 节流 将高频操作变成单位时间内只操作一次 应用场景：浏览电商网站的商品列表，滑动触底就会加载更多 window.addEventListener('scroll',this.throttle(this.handlescroll,1000)) handlescroll(){ let h = document.documentElement.scrollTop||document.body.scrollTop console.log(h) } /
简单节流防抖函数
小羊羔的博客
08-31 178
export default (func, threshold = 500, immediate = false) => { if (typeof func !== 'function') { throw new Error('First argument of debounce function should be a function'); } let timer = null; return function debounced(...args) { const
react 防抖和节流
最新发布
09-06
- *1* *2* *3* [一文搞懂如何在 React 中使用 防抖（Debounce）和 节流（Throttle）](https://blog.csdn.net/weixin_53312997/article/details/129248753)[target="_blank" data-report-click={"spm":"1018.2226....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值