Este artículo describe el concepto y el uso de la función de JavaScript. Compártelo para su referencia, como sigue:
Recientemente, cuando estaba haciendo páginas web, tenía un requisito, que era cambiar algunos tamaños de elementos de página cuando cambió la ventana del navegador, por lo que naturalmente pensé en el evento de cambio de tamaño de la ventana, así que escribí esto
<! Doctype html> <html> <head> <title> Throttle </title> </head> <body> <script type = "text/javaScript"> n = 0; función resizeHandler () {console.log (nueva fecha (). gettime ()); console.log (++ n); } window.onresize = resizeHandler; </script> </body> </html>Se implementa la función, pero cuando arrastro y dejo caer la forma en que cambio el tamaño de la ventana del navegador, miré la consola
Así es, una simple arrastre y caída hizo que mi método resizeHandler () ejecute 52 veces, que no es el efecto que quiero en absoluto. De hecho, el código de mi método resizeHandler () es muy complicado, e incluso uso AJAX para enviar solicitudes al servidor. Si simplemente cambio el tamaño de la ventana a la vez, tengo que llamar 52 veces. Este es un gran problema.
Función de estrangulamiento
De hecho, mi intención original es hacer algunos ajustes en la página después de que la ventana sea cambiar el tamaño. El evento de cambio de tamaño de la ventana no se activa después de que termina el cambio de tamaño. No conozco la frecuencia específica, pero se llama constantemente hasta que el tamaño de la ventana no cambia. De hecho, mecanismos similares y mousemove se activan repetidamente en un corto período de tiempo.
Hay funciones estrangulantes que tratan específicamente este problema en la programación avanzada de JavaScript
Funcion Throttle (método, contexto) {ClearTimeOut (método.tid); método.tid = setTimeOut (function () {método.call (context);}, 500);}El principio es muy simple. Use un temporizador para retrasar la ejecución de la función en 500 milisegundos. Si se llama nuevamente una función dentro de los 500 milisegundos, se eliminará la última llamada. Esta vez, la llamada se ejecutará después de 500 milisegundos, y esto se repetirá. De esta manera, mi código ahora se puede cambiar a
<script type = "text/javaScript"> n = 0; function resizeHandler () {console.log (nuevo date (). getTime ()); console.log (++ n);} Function Throttle (Method, Context) {ClearTimeOut (Method.tid); método.tid = setTimeOut (function () {método.call (context);}, 500);} window.onresize = function () {Throttle (resizeHandler, Window);}; </script>Intenta arrastrar y arrastrar, solo se ejecutó una vez
Otra forma de hacerlo
También hay una solución de limitación de función en línea, que hace esto
Funcion Throttle (método, demora) {var timer = null; function de return () {var context = this, args = argumentos; ClearTimeOut (temporizador); timer = setTimeOut (function () {método.apply (context, args);}, demora); }}Intenta llamarlo, el mismo efecto
<script type = "text/javaScript"> n = 0; function resizeHandler () {console.log (nuevo date (). getTime ()); console.log (++ n);} Function Throttle (método, demora) {var timer = null; function de return () {var context = this, args = argumentos; ClearTimeOut (temporizador); timer = setTimeOut (function () {método.apply (context, args);}, demora); }} window.onresize = Throttle (resizeHandler, 500); // Debido a que se devuelve el mango de función, no es necesario envolver la función </script>Comparar
Ambos métodos usan SetTimeOut. La diferencia es que la función agregada por el segundo método retrasa el tiempo de ejecución. Esto es fácil tener esta función en la primera solución, agregando un parámetro.
Pero la primera opción establece TID como una variable de la función para guardar, mientras que la segunda opción crea un cierre para la tienda. Personalmente, creo que la brecha no es grande, y me gusta el primero, lo cual es simple y eficiente.
Nueva demanda
Un día hice algo similar, al igual que la solicitud automática para la entrada en la página de inicio de Baidu. Vié el evento clave en el texto. Aplica automáticamente cada vez que aparece el teclado, pero no quiero indicar tan a menudo. Así que utilicé el método anterior, pero fue trágico. Solo detuve la entrada y esperé que 500 milisegundos se presentaran, y no hubo un aviso durante el proceso de entrada. Miré el código y descubrí que no era cierto. Mientras el usuario escriba a ciegas, presione el teclado dentro de los 500 milisegundos, la función de inmediato se retrasaría continuamente. Esto solo provocaría cuando me detuve, lo que no sería sentido.
¿Se puede ejecutar una vez en un tiempo fijo basado en la función de la función?
Pequeños cambios
Busqué en línea y podemos hacer algunos cambios basados en el segundo método de escritura (el primero es un poco malo para expandir múltiples variables para las funciones) y agregar un parámetro a medida que se debe ejecutar el intervalo fijo.
FUNCIÓN ALTO (Método, retraso, duración) {var Timer = null, begin = new Date (); Función de retorno () {var context = this, args = argumentos, actual = new Date () ;; ClearTimeOut (temporizador); if (current-begin> = duración) {método.apply (context, args); begins = actual; } else {timer = setTimeout (function () {método.apply (context, args);}, demora); }}}De esta manera, determinaremos cuánto tiempo es el intervalo. Si se excede el tiempo de configuración, lo ejecutaremos de inmediato. Use el ejemplo hace ahora para probar el efecto
window.onresize = Throttle (resizeHandler, 100,200);
Es cierto que no hay ejecución frecuente o ejecución final
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.