防抖和节流

什么是防抖和节流

防抖

就是指连续触发事件但是在设定的一段时间内中只执行最后一次。

假如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行。

应用场景：

• 输入框搜索建议： 在用户输入时，防抖可以延迟执行搜索操作，只有在用户停止输入一段时间后才触发实际的搜索请求，减少无效请求，提高搜索体验。
• 窗口大小调整： 当用户调整浏览器窗口大小时，防抖可用于延迟调整页面布局或重新计算元素大小，确保在用户停止调整窗口大小后才执行这些操作，避免频繁执行布局或计算操作。
• 按钮点击事件： 在按钮点击时，使用防抖可以避免用户多次点击造成的多次触发，确保只有在最后一次点击后的一段时间内没有再次点击时才执行操作，比如提交表单或打开新页面。

代码实现思路？ 代码思路是利用定时器，每次出发前先清掉以前的定时器（只要最后一次的操作）

let timerId = null
document.querySelector('.ipt').onkeyup = function() {
    // 防抖
    if(timerId !== null) {
        clearTimeout(timerId)
    }
    timerId = setTimeout(()=>{
        console.log("我是防抖")
    },1000)
}

节流

就是指连续触发事件但是在设定的时间段内只执行一次函数。

例如：设定1000毫秒执行，那你在1000毫秒内触发了多次，也只在1000毫秒后执行一次

应用场景：

• 页面滚动： 当用户滚动页面时，节流可以控制滚动事件的触发频率，以降低滚动事件的处理次数，提高页面性能。
• 鼠标移动事件： 在处理鼠标移动时，节流能够稀释函数的执行，保证在一定时间内只执行一次，避免过多的鼠标移动事件触发函数执行。
• 限制接口请求： 在某些场景下，例如用户频繁操作触发接口请求，节流可用于限制请求的频率，确保在一定时间间隔内只发送一次请求，避免服务器压力过大或节省用户的流量消耗。

代码实现思路？ 代码思路也是利用定时器，等当前定时器执行完毕，才开始下一个定时器（一段时间内只执行一次）

let timerId = null
document.querySelector('.ipt').onmouseover = function() {
    // 节流
    if(timerId !== null) {
       return
    }
    timerId = setTimeout(()=>{
        console.log("我是节流")
        timerId = null
    },100)
}

tips

防抖：类似于王者荣耀的游戏回城，一直点是没有用的，只执行最后一次。

节流：类似于王者荣耀的技能冷却，点了之后一段时间再次点击是无效的。

应用：vue3使用使用 lodash 插件 实现防抖节流

安装插件

pnpm add lodash --save

使用在页面引入

import _ from "lodash";

防抖

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

_.debounce ( )  // lodash封装的防抖函数
 
 
// 使用
 
// vue3 里面定义方法的时候，直接在setup里面使用 防抖函数包裹一下
 
const valueChnage = _.debounce(() => {
 
  console.log(val.value);
 
}, 500)

节流

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

_.throttle( ) // lodash封装的节流函数
 
 
// 使用
 
// vue3 里面定义方法的时候，直接在setup里面使用 防抖函数包裹一下
 
const valueChnage = _.throttle(() => {
 
  console.log(val.value);
 
}, 500)