Estrangulamiento antivibración [Pregunta 3]

Directorio de artículos

1. Pasar valores entre componentes manualmente

[Nueve conceptos básicos de Vue]: transferencia de valores entre componentes principales e secundarios
[Diez conceptos básicos de Vue] - transferencia de valores entre componentes hermanos [Bus de eventos central, suscripción y publicación de mensajes]

2. Dormir implementado por Promise

 const sleep = (time) => {
    
    
     return new Promise((resolve, reject) => {
    
    
         setTimeout(resolve,time)
     })
 }
 
 sleep(3000).then({
    
    
     console.log('延迟三秒才执行的哦')
 })

3. Antivibración y estrangulamiento

3-1

Función antivibración y aceleración: un medio para optimizar la ejecución de alta frecuencia del código js
- Algunos eventos en js: 像resize、scroll，鼠标的mousemove、mouseover，input输入框的keypresscuando se activa el evento, la función de devolución de llamada vinculada al evento se llamará continuamente, lo que desperdicia enormemente recursos y reduce el rendimiento del front-end
- Para optimizar la experiencia es necesario limitar el número de llamadas a este tipo de eventos.

3-1-1 Antivibración

Anti-vibración : ejecute la devolución de llamada después de n segundos después de que se active el evento, si se activa nuevamente dentro de n segundos, reinicie el tiempo

var timer;   
function debounce(fn, delay) {
      
      
    clearTimeout(timer);
    timer = setTimeout(function() {
      
      
        fn();
    },delay);
}

El rebote en el ejemplo es la función antivibración.

El temporizador var solo puede estar en el alcance principal de setTimeout, por lo que es el mismo temporizador, y para facilitar la llamada de la función anti-vibración y el paso de parámetros de la función de devolución de llamada fn, se deben usar cierres para resolver estos problemas

function debounce(fn,  delay) {
      
      
    var timer;   // 维护一个timer
    return function() {
      
      
        var _this = this;
        var args = arguments;
        if (timer) {
      
      
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
      
      
            fn.apply(_this, args);   // 用apply指向调用debounce的对象，相当于_this.fn(args)
        },delay);
    }
}

Después de usar el cierre, para resolver el problema de pasar parámetros y encapsular la función anti-vibración, puede pasar la función que necesita anti-vibración para rebotar en otros lugares.

3-1-2 Aceleración

De vez en cuando, ejecute la función solo una vez

El temporizador implementa la función de aceleración:

function throttle(fn, delay) {
      
      
    var timer;
    return function () {
      
      
        var _this = this;
        var args = arguments;
        if (timer) {
      
      
            return;
        }
        timer = setTimeout(function () {
      
      
            fn.apply(_this, args);
            timer = null;   // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

La marca de tiempo implementa la función de limitación:

function throttle(fn, delay) {
      
      
    var previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
      
      
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
      
      
            fn.apply(_this, args);
            previous = now;
        }
    }
}

3-2 Similitudes y diferencias entre función de aceleración y antivibración

Mismo punto:
- Ambos se pueden lograr usando setTimeout
- Propósito: Reducir la frecuencia de ejecución de devoluciones de llamadas y ahorrar recursos informáticos.
diferente:
- Función antivibración:
  - Una vez finalizado un período de operación continua, procese la devolución de llamada y utilice clearTimeout y setTimeout para lograr
  - Los eventos activados continuamente durante un cierto período de tiempo solo se ejecutan una vez al final
- Limitación de funciones:
  - En una operación continua, solo una vez por período de tiempo, se utiliza en eventos de alta frecuencia para mejorar el rendimiento.
  - Concéntrese en ejecutar solo una vez durante un período de tiempo

3-3 escenarios de aplicación:

3-3-1 Función antivibración

Para eventos continuos, solo es necesario activar una devolución de llamada:
- entrada de búsqueda del cuadro de búsqueda
  - Después de que el usuario haya ingresado por última vez, envíe la solicitud.
- Número de teléfono móvil, detección de entrada de verificación de correo electrónico
- tamaño de ventanaCambiar tamaño
  - Solo después de completar el ajuste de la ventana, calcule el tamaño de la ventana para evitar la representación repetida

3-3-2 Función de estrangulamiento

Ejecutar una devolución de llamada a intervalos
- Desplácese para cargar, cargue más o desplácese hacia abajo para escuchar
- Cuadro de búsqueda de Google, función de asociación de búsqueda
- Clics frecuentes para enviar, envíos repetidos de formularios

Cuarto, JS implementa suma, resta, multiplicación y división.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="tex1" />
    <select id="select">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" id="tex2" />
    <input type="button" value=" = " id="button" />
    <input type="text" id="fruit" />

    <script>
        var button = document.getElementById("button");
        button.addEventListener("click", count)

        function count() {
      
      
            var a = parseInt(document.getElementById("tex1").value);
            console.log(a);
            var b = parseInt(document.getElementById("tex2").value);
            console.log(b);
            var selectSign = document.getElementById("select").value;

            switch (selectSign) {
      
      
                case '+':
                    answer = a + b;
                    break;
                case '-':
                    answer = a - b;
                    break;
                case '*':
                    answer = a * b;
                    break;
                case '/':
                    answer = a / b;
            }
            document.getElementById("fruit").value = answer;
        }
    </script>

</body>

</html>

5. Algoritmo: búsqueda binaria

Olvídese de cuál era el tema en ese momento, el punto de conocimiento es la búsqueda binaria.