×

什么是防抖 ?什么是节流 ?以及应用场景

前端技术网 前端技术网 发表于2024-01-23 10:25:34 浏览1240 评论0

抢沙发发表评论

一、防抖和节流区别以及实现

防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调用一次,而节流的情况会每隔一定时间(参数wait)调用函数。

1.防抖

什么是防抖 ?什么是节流 ?以及应用场景

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

思路:

每次触发事件时都取消之前的延时调用方法

先来一个简单版的防抖

这是一个简单版的防抖,这个防抖只能在最后调用,一般的防抖会有immediate选项,表示是否立即调用

下面我们来实现一个带有立即执行选项的防抖函数

什么是防抖 ?什么是节流 ?以及应用场景

总结:

2.节流

每隔一段时间执行一次

思路:

每次触发事件时都判断当前是否有等待执行的延时函数

二、防抖和节流的区别

1.去抖动:该功能仅在高频事件触发后N秒内执行一次。如果n秒内再次触发高频事件,将重新计算时间。比如像百度搜索,每次输入后都会弹出相关词。一旦输入框的内容发生变化,这种控制相关词的方法就无法触发。必须在你打完一段时间后触发。节流:触发了一个高频事件,但是n秒才执行一次,所以节流会稀释函数的执行频率。例如,只有当预定功能大于或等于执行周期时,才会执行该预定功能,并且不会执行该周期内的调用。这就好比你在淘宝上抢购了数量有限的热门商品,你会点击刷新点去购买,但总会有一段时间,你点击了也没有效果。这里使用了节流你担心点击太快会导致系统出错。2.区别:防抖动是指将多次执行改为最后一次执行,节流是指将多次执行改为间隔执行。

三、什么是防抖和节流

1.防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算时间。

思路:每次触发事件时都取消之前的延时调用。

2.节流

高频事件触发,但在n秒内只会执行一次,节流会稀释函数的执行频率。

思路:每次触发事件时都判断当前是否有等待执行的延时函数。

四、防抖和节流的区别及实现

函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。

函数节流(throttle)与函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

1、防抖(debounce)

实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法

缺点:如果事件在规定的时间间隔内被不断的触发,则调用方**被不断的延迟

2、节流(throttle)

实现方式:每次触发事件时,如果当前有等待执行的延时函数,则直接return

**防抖:将多次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

**节流:使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别:

节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次ajax请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

————————————————

非常感谢您的阅读!我们希望本文对于解决您关于什么是防抖 ?什么是节流 ?以及应用场景的问题提供了一些有价值的信息。如果您还有其他疑问,我们将很乐意为您提供进一步的帮助。