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

安装插件

npm install lodash --save

使用在页面引入

import _ from "lodash";

防抖

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

_.debounce ( )  // lodash封装的防抖函数


// 使用

// vue3 里面定义方法的时候，直接在setup里面使用 防抖函数包裹一下

const valueChnage = _.debounce(() => {

  console.log(val.value);

}, 500)



// 也可以引入debounce 直接使用

import debounce from 'lodash/debounce'

const valueChnage = debounce(() => {

  console.log(val.value);

}, 500)

节流

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

_.throttle( ) // lodash封装的节流函数


// 使用

// vue3 里面定义方法的时候，直接在setup里面使用 防抖函数包裹一下

const valueChnage = _.throttle(() => {

  console.log(val.value);

}, 500)


// 也可以引入debounce 直接使用

import throttle from 'lodash/throttle'

const valueChnage = throttle(() => {

  console.log(val.value);

}, 500 ,{
  leading: false,  //节流开始前调用  默认为true
  trailing: false  //节流结束调用  默认为true
})

应用场景

防抖的应用场景：

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

节流的应用场景：

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