[Cerrar] función de estabilización y una función de gas

Dirección original: https: //zhuanlan.zhihu.com/p/38313717

La función anti-vibración y el acelerador es concepto muy similar, pero no son el mismo escenario.

Comenzamos con el concepto de una profunda comprensión de las mismas.

Permítanme hablar de la función anti-vibración, anti-rebote. De hecho, el concepto de que es de los interruptores mecánicos y los relés "rebotar" (de rebote) deriva de la idea básica es fusionar la pluralidad de señales en una sola señal.

SLR tiene un concepto similar, la toma de fotografías cuando el temblor de la mano al tomar fotografías si Nabu Wen general de teléfono móvil no es una buena foto disparar, por lo que el teléfono inteligente está en disparo continuo cuando se hace clic en muchas hojas, llevar una medios sintéticos, generar una Zhang. Se traduce en JS, N acciones dentro del evento se convertirá en insignificante después de único evento desencadenado por el programa `` acción sólo es válida.

Realización de las ideas más adelante, el método de destino (acción) envuelto en setTimeout dentro, entonces este método es un evento de devolución de llamada, si la devolución de llamada se ha ejecutado, no habrían sido ejecutadas estas acciones. ¿Por qué no hacerlo cumplir, nos involucramos en un clearTimeout, como en el método setTimeout no será ejecutado! ¿Por clearTimeout, necesitamos un funcionamiento continuo en caso de eliminarlo! Hasta que el usuario no activa este evento. Así que, naturalmente, setTimeout pondrá en práctica este método.

A continuación, el método utilizado en cualquier lugar, que se utiliza para validar el formato de entrada de trama de entrada, aunque sólo sea para verificar las letras son dignos de mención, demasiado simple, menos consumo de rendimiento, si se trata de verificar la identidad, que consumen gran rendimiento, puede verificarse sólo una vez cada 170 ms. A continuación, necesita estas cosas. Esta es una forma completamente automática o si necesita su entrada tirará extremo posterior de datos de una lista, la interacción frecuente, el backend ciertamente no puede permitirse el lujo de consumir, entonces también se necesita esto, por ejemplo, cada 350 ms.

la función de supresión de rebotes (func, retardo) {
     var tiempo de espera;
    retorno de  la función (e) {
        console.log ( "清除" , tiempo de espera, e.target.value)
        clearTimeout (tiempo de espera);
        var context = esta , args = argumentos
        console.log ( "新的" , tiempo de espera, e.target.value)
        tiempo de espera = setTimeout ( función () {
          console.log ( "----" )
          func.apply (contexto, args);
        },retrasar)
    };
};

var validate = antirrebote ( función (e) {
    console.log ( "cambio", e.target.value, nueva fecha-0 )
}, 380 );

// Enlazar escuchar 
document.querySelector ( "input") addEventListener ( 'entrada', Validar) .;

 

 

Esto asegura que cada normales caracteres de entrada de usuario lata 1, 2 gatillo una vez. Si el usuario es juerga de entrada, que puede ser implacable sistema cada tres a seis caracteres de entrada gatillo una vez.

El objetivo de este método es que no se dispara cuando un evento de usuario, se desencadena la acción, e inhibir la acción tendría que ser realizada en el caso.

Otras aplicaciones: se someten evento de clic de botón.

 

Mira el acelerador, el acelerador. El concepto de estrangulación puede imaginar represas a construir una presa en el río, no se puede dejar que el flujo de agua no se puede, se puede dejar que el agua lentamente. En otras palabras, no se puede hacer que no se aplican los métodos del usuario. Si tan seco, es decir, la supresión de rebotes. Para dar a los usuarios un método realiza sólo una vez en un período de tiempo, tenemos que guardar el punto en el tiempo del temporizador se ejecuta pasado.

 

 < Div ID = 'Panel' estilo = "background: rojo; ancho: 200px; altura: 200px" >

 </ Div >

la función del acelerador (fn, umbral) {
  var tiempo de espera
  var start = nueva fecha;
 var umbral = umbral || 160
  retorno  función () {

 var context = este , args = argumentos, curr = nueva fecha () - 0
 
 clearTimeout (tiempo de espera) // siempre matar devoluciones de llamada de eventos 
 SI (curr - Inicio> = umbral) {
     la console.log ( "ahora", Curr, Curr - Inicio) // Tenga en cuenta que el resultado de la resta, casi alrededor de 160. 
     fn.apply (contexto, args) // realizar sólo una parte del método, estos métodos son en un momento determinado el segmento de realizar una 
     Start = Curr
 } La otra cosa {
  // método Let puede realizarse una vez después de que el evento de la 
     timeout = el setTimeout ( función () {
        fn.apply (contexto, args) 
     }, Umbral);
    }
  }
}
var mousemove = acelerador ( función (e) {
 console.log (e.pageX, e.pageY)
});

// Enlazar escuchar 
document.querySelector ( "# Panel") addEventListener ( 'mousemove', mousemove) .;

Del acelerador función se utilizará en el caso de que la entrada, keyup con más frecuencia se activa, tales como cambio de tamaño, touchmove, mousemove, de desplazamiento. throttle función de fuerza se realiza a una tasa fija. Por lo tanto, este método es adecuado para escenarios utilizados en la animación-relacionados.

 

Si usted todavía no puede entender completamente  debounce y  throttle diferencias, se puede ir a  esta página  vistazo a la comparación visual de los dos.