防抖和节流

标签：情况   bsp   时间   关闭   手机   请求   执行函数   间隔   限制   

为什么要使用防抖和节流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 

通常这种情况下防抖和节流是比较好的解决方案。

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

例子：
简单说，当一个动作连续触发，则只执行最后一次。如：坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。

应用场景：

连续的事件，只需触发一次回调：
1、搜索框搜索输入，只需用户最后一次输入完，再发送请求
2、手机号、邮箱验证输入检测

节流（throttle）

限制一个函数在规定时间内只能执行一次。
例子：
如：乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。

应用场景：

间隔一段时间执行一次回调：
1、滚动加载，加载更多或滚动到底部监听
2、搜索联想功能
3、高频点击提交，表单重复提交

防抖和节流

标签：情况   bsp   时间   关闭   手机   请求   执行函数   间隔   限制   

原文地址：https://www.cnblogs.com/wenwenovo/p/11646075.html