[Resumen]: Preguntas de optimización requeridas para la entrevista de JavaScript - Regulación anti-vibración - Escenario de aplicación

---

1. Antivibración

Después de que se active el evento de alta frecuencia, solo se ejecutará una vez en n segundos, y el tiempo se volverá a calcular si se vuelve a activar en n segundos.

Ideas de diseño antivibración:

1. acontecimiento desencadenante
2. tiempo claro
3. establecer el tiempo

Si todavía hay una operación de solicitud/evento dentro del tiempo especificado, el tiempo se borrará y se reiniciará.
Si no hay ninguna solicitud/evento dentro del tiempo especificado, envíe o se pueden realizar las siguientes operaciones

Código

let btn = document.querySelector('button')

function payMoney() {
    
    
    console.log('已剁');
}

function debounce(payMoney, delay) {
    
    
    let timer  //1. 防止多次创建timer 2.(第二次点击时，由于闭包的原因 第一次的timer会存在)
    return function () {
    
    
        let context = this //保存button的this
        let args = arguments //参数
        clearTimeout(timer)
        timer = setTimeout(() => {
    
    
            payMoney.apply(context, args) //调用函数，修改this指向为context(button),添加参数
        }, delay);
    }
}

btn.addEventListener('click',debounce(payMoney,2000))

2. Estrangulamiento

Los eventos de alta frecuencia se activan pero solo se ejecutan una vez en n segundos, por lo que la limitación diluye la frecuencia con la que se ejecuta la función.

Ideas de diseño para la limitación:

1. acontecimiento desencadenante
2. Juicio: ¿Está el evento desencadenante dentro del intervalo de tiempo? Sí: no activar; no: activar
3. establecer el tiempo

Si todavía hay una operación de solicitud/evento dentro del tiempo especificado, se requerirá que esta operación de solicitud/evento espere el primer disparo de evento.

Código

function coloring() {
    
    
	let r = Math.floor(Math.random() * 255)
	let g = Math.floor(Math.random() * 255)
	let b = Math.floor(Math.random() * 255)
	document.body.style.background = `rgb(${
      
      r},${
      
      g},${
      
      b})`
}

function throttle(coloring,delay) {
    
    
    let timer
    return function() {
    
    
        let contxt = this
        let args = arguments

        //判断：如果有timer，说明上一个时间还未结束
        if(timer) {
    
    
            return  //没结束你就return停止，等上一个结束
        }
        timer = setTimeout(() => {
    
    
            coloring.apply(contxt,args)
            timer = null  //timer不在事件完成之后给null的话，上面的if会一直判断为真
        }, delay);
    }
}

window.addEventListener('resize',throttle(coloring,2000))

3. Resumen

防抖: Combine múltiples operaciones en una sola operación. El principio es mantener un temporizador, que estipula que la función se activa después del tiempo de retraso, pero si se vuelve a activar dentro del tiempo de retraso, el temporizador anterior se cancelará y restablecerá. De esta manera, solo se puede activar la última acción.

节流: Hace que la función se active solo una vez dentro de un cierto período de tiempo. El principio es juzgar si hay una función de llamada retrasada que no se ejecuta.

la diferencia

La limitación de funciones garantiza que, independientemente de la frecuencia con la que se active el evento, el controlador de eventos reales se ejecutará una vez dentro del tiempo especificado, mientras que la función antivibración solo activa la función una vez después del último evento.
Por ejemplo, en el escenario de carga infinita de la página, necesitamos que el usuario envíe una solicitud Ajax de vez en cuando mientras se desplaza por la página, en lugar de solicitar datos cuando el usuario deja de desplazarse por la página. Tal escenario es adecuado para lograr la tecnología de estrangulamiento.