js节流会稀释函数的执行频率吗?
来源:蜘蛛抓取(WebSpider)
时间:2022-07-12 05:09
标签:
函数周期公式
函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。
函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
节流原理:规定时间内只执行一次,它与防抖的最大区别是即使在高频的动作在规定时间内都会执行一次
-
腾讯云+社区系列公开课上线啦!
Vite学习指南,基于腾讯云Webify部署项目。
先给大家说一下,防抖与节流的两个概念。
1、防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间
举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发。
节流(thorttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率
举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现bug。
2、区别:防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
当我在输入框内输入任意字符时,控制台不会立即输出我所输入的每一个字符,而是在我停止输入后,规定时间后控制台才会输出输入框的内容。
当我在1s内多次点击按钮,数字也只会加1。
以上就是防抖与节流的区别,但是更多的是希望大家自己动手去试一下这俩者的区别,才能更好的去理解,并加深记忆。