Análisis en profundidad de cómo funciona la función lista de jQuery (cómo funciona)_jquery
JQuery es una excelente biblioteca de scripts. La primera versión fue lanzada por John Resig en BarCamp en Nueva York en junio de 2006. Puede descargar la última versión desde /, que se actualizó a jQuery 2.1.4 en el momento de la publicación. Tome jQuery1.8.3 como ejemplo.
Hay muchas maneras de aprender jQuery. Hoy comenzaremos con la función lista de jQuery. El código de este ejemplo proviene de la biblioteca de scripts jQuery.
Si has utilizado jQuery, entonces debes haber utilizado la función ready, que se utiliza para registrar funciones que se pueden ejecutar cuando la página está lista.
La pregunta es ¿cuándo estará lista nuestra página?
1. Evento de carga
La forma más básica de manejar este evento es el evento de carga de la página. Cuando manejamos este evento, hay muchas formas. Puede escribirse directamente en la etiqueta de inicio del elemento del cuerpo a través de HTML, o puede usarse mediante el registro de eventos, que se divide en DOM0 y DOM2. Teniendo en cuenta la compatibilidad del navegador, está escrito en modo DOM2, como se muestra a continuación.
2. Evento DOMContentLoaded
Sin embargo, el evento de carga solo se activará después de que se hayan cargado todos los elementos de la página (incluidas las imágenes de la página, etc.). Si hay muchas imágenes en la página web, se puede imaginar el efecto. Es posible que el usuario haya comenzado a operar la página antes de ver la imagen, pero en este momento nuestra página no se ha inicializado y el evento no se ha registrado. ¿Es demasiado tarde?
Además del conocido evento onload, similar al evento onload en DOM, también debemos considerar el evento DOMContentLoaded. Los navegadores basados en estándares admiten este evento y se activarán cuando se haya analizado todo el DOM.
De esta forma, para navegadores basados en estándares, también podemos registrar el manejo de este evento. De esta manera, podemos detectar el evento de finalización de la carga antes.
3.evento onreadystatechange
¿Qué hacer con navegadores no estándar?
Si hay un evento document.onreadystatechange en el navegador, cuando se activa el evento, si document.readyState = completo, se puede considerar que el árbol DOM está cargado.
Sin embargo, este incidente no es muy fiable. Por ejemplo, cuando hay imágenes en la página, es posible que no se active hasta después del evento de carga. En otras palabras, sólo funcionará correctamente como alternativa si la página no contiene recursos binarios o contiene muy pocos o está almacenada en caché.
¿Qué hace la función DOMContentLoaded? Finalmente, debes llamar a la función jQuery.ready.
4.Método de detección de Dosscroll
MSDN tiene un comentario discreto sobre un método de JScript. Cuando la página DOM no se carga por completo, se generará una excepción cuando se llame al método doScroll. Luego lo usamos al revés. Si no hay ninguna excepción, ¡cargue la página DOM!
En 2007, Diego Perini informó sobre un método para detectar si IE está completamente cargado, utilizando la llamada al método doScroll. Consulte aquí para obtener una explicación detallada.
El principio es que cuando IE está en un no iframe, solo se puede juzgar si el DOM se ha cargado en función de si se puede ejecutar doScroll. En este ejemplo, intente ejecutar doScroll cada 50 milisegundos. Tenga en cuenta que, dado que llamar a doScroll cuando la página no está cargada provocará una excepción, utilice try -catch para detectar la excepción.
5.document.readyState
Si es demasiado tarde para registrar la función lista, después de cargar la página, podemos registrar nuestra propia función lista, por lo que hay no es necesario verificar la capa anterior, solo mire el estado listo de la página actual. Si se ha completado, podemos ejecutar directamente la función lista que queremos registrar. Sin embargo, Chris informó un error muy específico que debemos posponer la ejecución.
SetTimeout se usa comúnmente como temporizador en páginas web, lo que le permite especificar un milisegundo como tiempo de ejecución del intervalo. Cuando el programa iniciado necesita ejecutarse en un corto período de tiempo, le asignaremos una pequeña cantidad de horas, o si necesita ejecutarse inmediatamente, incluso establecemos la cantidad de milisegundos en 0, pero de hecho setTimeout tiene un tiempo mínimo de ejecución. Cuando el tiempo especificado es menor que este tiempo, el navegador utilizará el tiempo mínimo permitido como intervalo setTimeout, es decir, incluso si configuramos setTimeout milisegundos en 0, el programa llamado no se iniciará inmediatamente.
¿Cuál es el intervalo de tiempo mínimo? Esto depende del navegador y del sistema operativo. Mencionado en el nuevo libro de John Resig Secrets of the Javascript Ninja
Todos los navegadores tienen una latencia mínima de 10 milisegundos en OS x y (aproximadamente) 15 en Windows. Retraso en milisegundos. (El intervalo mínimo en Mac es de 10 milisegundos y en sistemas Windows es de unos 15 milisegundos). Además, la introducción a setTimeout en MDC también mencionó que el intervalo de tiempo mínimo (DOM_MIN_TIMEOUT_VALUE) definido en Firefox es de 10 milisegundos, y el intervalo de tiempo mínimo definido en HTML5 es de 4 milisegundos. Dado que la especificación está escrita así, parece que no hay forma de acortar este intervalo de tiempo mínimo utilizando setTimeout.
De esta forma, poniéndolo a 1 podremos hacer que el programa se ejecute después del intervalo mínimo soportado por el navegador.
6. Código completo
El código completo en jQuery es el siguiente. Está ubicado en la línea #842 del código fuente de jQuery 1.8.3.
Entonces, ¿quién lo llamará? Por supuesto, cuando sea necesario, cuando llamamos a la función lista, debemos registrar estos procesos para determinar si la página está llena. Este código se encuentra en la línea 244 del código en 1.8.3, como se muestra a continuación:
Después de hacer referencia a la biblioteca de scripts jQuery en la página, ejecute la función de inicialización de jQuery y cree una función lista en la función de inicialización. Antes de registrar el manejo de eventos a través de la función lista, jQuery completa el registro del código de detección de página. Por aquí. Cuando la página está completamente cargada, se llama a la función que registramos.
Suplemento: modo abreviado jquery ready
Función jquery ready:
Se puede abreviar como:
Espero que este artículo sea útil para Tu programación jQuery ayuda.