uniapp 防抖节流封装和使用

防抖(debounce)：定义一个时间，延迟n秒执行，n秒内再次调用，会重新计时，计时结束后才会再次执行

主要运用场景：

1. 输入框实时搜索：在用户输入内容的过程中，使用防抖可以减少频繁的查询操作，提高性能。
2. 点击事件：当用户在短时间内多次点击某个按钮时，可以使用防抖只执行一次点击事件，避免不必要的重复操作。

函数封装 util文件下创建 commo.js文件

let timer

/**
*防抖
*/

export function debounce(fn,delay){
    clearTimeout(timer)
    timer = setTimeout(()=>{
        fn();
    },delay);
}

引入调用

//引入防抖函数
import {debounce} from 'util/common.js'


//调用
debounce(()=>{
    //需要防抖执行的逻辑
},800)

节流(throttle): 函数会在一个时间段内只执行一次

主要运用场景：登陆、频繁请求大量数据接口

函数封装 util文件下创建 commo.js文件

let lastCall = 0

/**
*节流函数
*/

export function throttle(fn,delay){
    const now = new Date().getTime();
    if(now-lastCall<delay){
        return
    }
    lastCall = now
    fn.apply(this,arguments)
  
}

引入调用

//引入防抖函数
import {throttle} from 'util/common.js'


//调用
throttle(()=>{
    //需要节流执行的逻辑
},800)