He implementado la carga diferida de contenido en mi página web de la siguiente manera:
Carga inicial: func1: Obtenga información de 10 marcas a través de una llamada ajax (también devuelve el total de datos esperados). func2: Obtenga información de productos de las 10 marcas recibidas en la función anterior a través de ajax.
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){ if(totaldatarecvd < totalExpectedData){ func1: Get information for next 10 brands via ajax call. func2: Get products information of the 10 brands recieved in above function via ajax. } }Problema: en Google Chrome funciona bien, mientras que en Mozilla Firefox, cuando el usuario ha desplazado la pantalla, se realizan múltiples solicitudes ajax en un 70 % y, por lo tanto, se interrumpe el orden de los datos procesados. Esperado: cuando se desplace el 70% de la pantalla, realice una solicitud ajax para obtener los siguientes 10 datos. En un desplazamiento adicional, obtenga las siguientes 10 marcas y así sucesivamente.
Sugiera cómo se puede implementar la carga diferida con una solicitud a la vez.
Creo que está experimentando este comportamiento porque cuando se desplaza por una página usando, por ejemplo, la rueda de un mouse, lo que realmente está haciendo es desplazar la página por X píxeles a la vez (digamos, 20 píxeles con una rueda "desplazamiento" ). Sin embargo, el evento de desplazamiento se activa cada vez que la página se desplaza 1 píxel hacia abajo. Por lo tanto, cualquier funcionalidad que haya asignado al evento de desplazamiento debería ejecutarse teóricamente 20 veces por cada "desplazamiento" de la rueda.
Solución: agregue una variable (global) que controlará si se alcanzó la posición de desplazamiento deseada (y, por lo tanto, se inició una carga de datos), y utilícela para evitar múltiples solicitudes de carga de datos. La variable debe establecerse inicialmente en false y, una vez que se haya alcanzado la posición de desplazamiento deseada, establecerse en true e iniciar la carga de datos.
No olvide establecerlo en false después de que se haya completado la carga de datos, de lo contrario, solo funcionará la primera vez.
dataLoading = false; if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7 && !dataLoading){ dataLoading = true; if(totaldatarecvd < totalExpectedData){ func1: Get information for next 10 brands via ajax call. func2: Get products information of the 10 brands recieved in above function via ajax. } }