JS的防抖和节流

应用场景： 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的防抖和节流、防抖和截流、轮播图中使用防抖和节流等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！