防抖和节流是常用的优化前端性能的方法。
一.防抖
1.防抖是指在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。防抖的实现方式可以使用setTimeout函数和闭包。
2.防抖封装
export function debounce(fn: Function, delay = 200) {// 参数1:调用的函数或者是请求 参数2:延迟多少毫秒才执行
let timer: NodeJS.Timeout | null = null;//设定一个,在没有执行定时器为null
return function () {
if (timer) {//
clearTimeout(timer)
}
timer = setTimeout(() => {//创建一个定时器在指定时间内触发次此函数
fn.apply(this, arguments)//fn需要防抖的函数,arguments调用函数参数的信息
timer = null
}, delay)
console.log(timer, 'timer')
}
}
3.使用在登录页面,引入封装好的防抖,调用封装好的防抖
import { debounce } from "@/utils/DebounceThrottle";//引入封装好的防抖
const submitForm = debounce(login, 200)//调用封装好的防抖参数1:请求接口数据,参数2:延迟200毫秒
4.应用场景
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小
resize
。只需窗口调整完成后,计算窗口大小。防止重复渲染。
二.节流
1.节流是指在一段时间内只执行一次回调函数。节流的实现方式可以使用setTimeout函数和闭包。
2.节流封装
export function throttle(fn: Function, delay = 100) {
let timer: NodeJS.Timeout | null = null;//首先设定一个变量,在没有执行我们的定时器为null
return function () {
if (timer) return; //当我们发现这个定时器存在时,则表示定时器已经在运行中,需要返回
timer = setTimeout(() => {
fn.apply(fn, arguments);//apply更改this指向,指向正在操作的组件实例传入参数
timer = null;
}, delay)
}
}
3.应用场景
- 滚动加载,加载更多或滚到底部监听
- 搜索框,搜索联想功能