手撕防抖与节流_假设电梯有防抖和节流两种运行模式,超时设定10秒,不考虑容量限制-CSDN博客

适用场景

如果事件触发非常频繁，而且每一次的触发，回调函数要去执行

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

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

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

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

普通js

框架开发

两者简单理解：

就比如：

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

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

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

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

防抖

概念：

在时间触发后等待指定时间后再去执行函数，若是中途又触发了这个事件，则重新计时

语法：

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

参数：

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

实际应用举例：

页面的输入框

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

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

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

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

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

原生防抖函数实现

function Debounce(fn,wait){
    let timer ;
    return function(...args){
        let context = this;  //保存上下文信息
        clearTimeout(timer); //清除原先的定时器
         timer = setTimeout(()=>{  //创建一个新的定时器去重新计时，时间一到执行函数
            fn.apply(context, args);
        })
    }
}

节流

在规定的时间内只能触发一次回调，控制事件处理的频率，减少过多的计算对系统性能造成负担

语法

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

参数

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

实际举例

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

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

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

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

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

逻辑体

},时间）

原生节流实现

function throttle(fn,wait){
    let is = true   //设置一个标志位，来判断是否已经执行过函数
    return function(...args){
        if(is){        //如果允许执行函数
            is = false;   //将其设为false，防止后续被调用
            fn.apply(this, args);  //执行函数
            setTimeout(()=>{     //在规定时间内去释放is，开始下一次执行
                is = true;
            }, wait);
        }

    }
}

节流与防抖的区别：

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

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

实际开发应用场景：

防抖：
- 表单提交：比如用户在输入框中连续输入时，可以使用防抖来延迟提交表单，以避免频繁的请求和服务器负载。
- 页面滚动：当用户滚动页面时，可以使用防抖来延迟触发滚动事件的处理逻辑，以减少计算和渲染的频率。
- 自动完成搜索：当用户在搜索框中输入时，可以使用防抖来延迟触发搜索请求，以减少网络请求的次数。
- 窗口调整：当用户调整窗口大小时，可以使用防抖来延迟触发窗口调整事件的处理逻辑，以减少页面重排和重绘的次数。
节流：
- 页面滚动加载：当用户滚动到页面底部时，可以使用节流来限制触发加载更多数据的频率，以减少网络请求的次数。
- 按钮点击：当用户点击一个按钮时，可以使用节流来限制按钮的点击频率，防止误操作或者多次提交。
- 鼠标移动：当用户移动鼠标时，可以使用节流来限制触发鼠标移动事件的频率，以减少计算和渲染的次数。
- 轮播切换：当用户切换轮播图时，可以使用节流来限制切换的频率，以提升轮播效果的流畅度。