八里河风景区网站建设设计概述小鱼儿外贸建站

防抖(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 = nowfn.apply(this,arguments)}

引入调用

//引入防抖函数
import {throttle} from 'util/common.js'//调用
throttle(()=>{//需要节流执行的逻辑
},800)