Estrangulamiento anti-vibración de Vue

Anti-shake y throttling son métodos comúnmente utilizados para optimizar el rendimiento del front-end .

1. Antivibración

1. Anti-vibración significa que la función de devolución de llamada se ejecuta después de n segundos después de que se activa el evento. Si se activa nuevamente dentro de estos n segundos, el tiempo se reiniciará. La implementación de antivibración puede usar la función setTimeout y el cierre.

2. Paquete anti-vibración

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. Úselo en la página de inicio de sesión, introduzca el antivibración empaquetado, llame al antivibración empaquetado

import { debounce } from "@/utils/DebounceThrottle";//Importar debounce empaquetado
const submitForm = debounce(login, 200)//Llamar al debounce empaquetado parámetro 1: solicitar datos de interfaz, parámetro 2: demora 200 milisegundos

4. Escenarios de aplicación

• Cuadro de búsqueda Entrada de búsqueda. Solo el usuario debe ingresar la última vez antes de enviar la solicitud
•  Número de teléfono móvil, detección de entrada de verificación de correo electrónico
• tamaño de la resizeventana Simplemente calcule el tamaño de la ventana después de que se haya realizado el cambio de tamaño de la ventana. Impedir volver a renderizar.

2. Estrangulamiento

 1. Limitación significa que la función de devolución de llamada se ejecuta solo una vez dentro de un período de tiempo. La limitación se puede lograr mediante la función setTimeout y los cierres.

2. Paquete de estrangulamiento

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. Escenarios de aplicación

• Desplácese para cargar, cargue más o desplácese hasta el final para escuchar
• Cuadro de búsqueda, función de asociación de búsqueda