JS的防抖和节流

加工贸易2023-05-02  25

应用场景: input输入信息进行搜索,如果每敲一个字符就请求后台接口,给后台的压力太大了,所以做好防抖,即让程序只执行最后一次的事件。

为解决该问题,探索到了两个解决方案:

直接使用lodash工具库的debounce方法

参考网址: >

一、什么是防抖和节流

防抖:把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。

存在问题:希望在下滑过程中不断被加载出来,而不是只有当停止下滑的时候,才加载出来,又或者下滑的时候的数据ajax请求加载也是同理

节流:只允许一个函数在一定时间内执行一次。

与防抖相比,节流函数最主要的不同在于它保证在X毫秒内至少执行一次我们希望触发的事件 handler。

二、为什么使用防抖和节流

防止用户点击过快,严格控制触发事件的时间, 用户即使频繁点击,也能在规定的时间内减少触发次数,保证程序正常运行。

三、怎么做

定义一个变量canClick : true,在每次单击时, 先判断, 是否能单击,如果能单击, 翻页(i+1/i-1), 然后立即禁止单击, 将canClick改为false, 通过一次性定时器setTimeout设置时间,等动画播放后,再允许单击。

1节流:n秒内只运行一次,若在n 秒后重复执行,只有一次执行

2防抖: n秒后执行该事件,若在n秒后被重复触发,则重新计时

想象每天上班的乘坐的电梯。把电梯完成一次的运送。比喻成一次函数的执行和响应

假设电梯有两种运行的策略,超时设定为15秒,不考虑容量限制,电梯的第一个进来后,15秒后运行,这就加节流

第一个人进来之后,等待15秒,如果过程中又有一个人进来。15秒回重新计时,直到15秒后开始运行,这就是防抖

以上就是关于JS的防抖和节流全部的内容,包括:JS的防抖和节流、防抖和截流、轮播图中使用防抖和节流等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

转载请注明原文地址:https://juke.outofmemory.cn/read/3760500.html

最新回复(0)