防抖(debounce)与节流(throtttle)

适用场景

如果事件触发非常频繁，而且每一次的触发，回调函数要去执行(如果触发时间间隔很短，而且回调函数内部有计算，那么很有可能会出现浏览器来不及解析代码而出现浏览器卡顿现象，这时就要使用函数的防抖与节流去解决)

在使用防抖与节流之前，需要使用一个插件lodash,里面封装了函数的防抖与节流的业务【闭包+延迟器】

lodash的函数库对外暴露的是_函数

 lodash下载地址：点我跳转下载地址。下载以lodash.js或者lodash.min.js结尾的

普通js

框架开发

两者简单理解：

就比如：

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应

假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制

电梯第一个人进来后，15秒后准时运送一次，这是节流。

电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。

防抖

概念：

前面的所有触发都被取消，最后一次执行在规定时间之后才会触发，也就是说如果连续快速的触发，最终只会执行一次

语法：

_.debounce(func,[wait=0],[options=])  //创建一个debounced(防抖动)函数，该函数会从上一次被调用后，延迟wait毫秒后调用func方法

 参数：

1. func (Function): 要防抖动的函数。
2. [wait=0] (number): 需要延迟的毫秒数。
3. [options=] (Object): 选项对象。
4. [options.leading=false] (boolean): 指定在延迟开始前调用。
5. [options.maxWait] (number): 设置 func 允许被延迟的最大值。
6. [options.trailing=true] (boolean): 指定在延迟结束后调用。

实际应用举例：

页面的输入框

利用js随便写一个输入框：

​

利用document.querySelector获取input标签,并绑定输入事件

​

打开控制台观察发现，当我们每输入一个字的时候，回调函数就会执行一次

我们想要的是，当我们输入完成后回调再执行，所以就可以利用防抖来实现

​

wait参数设置为一秒，使要防抖的函数延迟一秒再执行，再次打开控制台，输入数据，发现问题已经解决

节流

在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

语法

_.throttle(func,[wait=0],[options=]) //创建一个节流函数，再wait秒内最多执行func一次的函数

参数

1. func (Function): 要节流的函数。
2. [wait=0] (number): 需要节流的毫秒。
3. [options=] (Object): 选项对象。
4. [options.leading=true] (boolean): 指定调用在节流开始前。
5. [options.trailing=true] (boolean): 指定调用在节流结束后。

实际举例

例如写一个按钮，点击按钮就会使相应的数字加一

​

 利用js获取数值的标签与按钮的标签，给按钮绑定点击事件，点一次数值加1

​

这时我们发现只要我们一值点按钮，数字就会不断的向上加1，那么我们如果给按钮加上了节流函数会怎么样呢？

​

让要被节流的函数每隔1秒执行一次，观察发现，在一秒期间，无论我们点击多少次按钮，数值只会加1，这就是所谓的节流，在规定的时间内只让回调函数执行一次

框架：点击事件名：throttle(function(参数){

                                              逻辑体

                                            },时间）

节流与防抖的区别：

防抖：虽然用户操作很频繁，但是只执行用户最后一次调用函数的行为

节流：用户操作很频繁，但是节流是让频繁的操作变得少量，给浏览器足够的时间解析代码

实际开发应用场景：

1. 防抖：

   • 表单提交：比如用户在输入框中连续输入时，可以使用防抖来延迟提交表单，以避免频繁的请求和服务器负载。
   • 页面滚动：当用户滚动页面时，可以使用防抖来延迟触发滚动事件的处理逻辑，以减少计算和渲染的频率。
   • 自动完成搜索：当用户在搜索框中输入时，可以使用防抖来延迟触发搜索请求，以减少网络请求的次数。
   • 窗口调整：当用户调整窗口大小时，可以使用防抖来延迟触发窗口调整事件的处理逻辑，以减少页面重排和重绘的次数。

2. 节流：

   • 页面滚动加载：当用户滚动到页面底部时，可以使用节流来限制触发加载更多数据的频率，以减少网络请求的次数。
   • 按钮点击：当用户点击一个按钮时，可以使用节流来限制按钮的点击频率，防止误操作或者多次提交。
   • 鼠标移动：当用户移动鼠标时，可以使用节流来限制触发鼠标移动事件的频率，以减少计算和渲染的次数。
   • 轮播切换：当用户切换轮播图时，可以使用节流来限制切换的频率，以提升轮播效果的流畅度。