vue的防抖节流

防抖和节流是常用的优化前端性能的方法。

一.防抖

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.应用场景

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能