Closures para infinite scroll en múltiples rutas

Curso de API REST con Javascript: Performance y Usabilidad

Contenido del curso

No sé dónde empezar

Qué se debe optimizar en el frontend (y qué no)

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

20
Cierre y próximos pasos con tu portafolio
08:08 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:53

Closures para infinite scroll en múltiples rutas

Curso de API REST con Javascript: Performance y Usabilidad

Clase 13 de 20

Clase 13 / 20

Recursos

Implementar infinite scroll en múltiples rutas de una aplicación parece sencillo hasta que necesitas pasar parámetros distintos a cada función de paginación. Aquí es donde los closures en JavaScript se convierten en la herramienta más elegante para resolver el problema, permitiéndote reutilizar la misma lógica de scroll para tendencias, búsquedas y categorías sin duplicar código.

¿Por qué usar closures para el infinite scroll?

Cuando ya tienes funcionando getPaginatedTrendingMovies con su validación de scroll y su límite de páginas, replicar ese comportamiento en búsquedas y categorías exige enviar parámetros adicionales como query o el ID de la categoría. El problema aparece al asignar la función al evento de scroll: necesitas pasarle el nombre de la función, no su ejecución.

¿Qué es un closure en JavaScript? Es una función que recuerda las variables del ámbito donde fue creada, incluso después de que ese ámbito haya terminado de ejecutarse. Permite "encerrar" parámetros para usarlos más tarde.

Si escribes infiniteScroll = getPaginatedMoviesBySearch(query), estás ejecutando la función inmediatamente en lugar de guardar su referencia. El resultado: el scroll deja de disparar nuevas peticiones cuando llegas al final de la página [05:30].

¿Cómo se construye un closure para paginación?

La idea consiste en transformar tu función de paginación en una función que devuelve otra función. La función externa recibe el parámetro que necesitas conservar (query o categoryId), y la función interna ejecuta toda la lógica de scroll, validación y consulta a la API.

javascript function getPaginatedMoviesBySearch(query) { return async function () { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; const scrollIsBottom = (scrollTop + clientHeight) >= (scrollHeight - 15); const pageIsNotMax = page < maxPage;

if (scrollIsBottom && pageIsNotMax) {
  page++;
  const { data } = await api('/search/movie', {
    params: { query, page },
  });
  const movies = data.results;
  createMovies(movies, genericSection, { lazyLoad: true, clean: false });
}

}; }

Al asignarla con infiniteScroll = getPaginatedMoviesBySearch(query), ejecutas únicamente la función externa, que captura query en su closure y te devuelve la función interna lista para dispararse en cada evento de scroll.

¿Qué hace exactamente la función externa?

Su único trabajo es recibir el parámetro y devolver la función real de paginación. No hace peticiones, no valida scroll, no renderiza. Es un envoltorio cuya razón de existir es preservar el valor que la función interna usará después.

¿Y la función interna?

Es la que se ejecuta en cada scroll. Gracias al closure, tiene acceso a query aunque la función externa ya haya terminado. Aquí ocurre la validación del scroll, el incremento de página, la consulta al endpoint /search/movie y la renderización con lazyLoad: true y clean: false para no borrar los resultados anteriores.

¿Cómo aplicar el mismo patrón a categorías?

La lógica se replica casi idéntica para getPaginatedMoviesByCategory, pero con dos cambios clave: el endpoint pasa a ser /discover/movie y el parámetro enviado es withGenres con el ID de la categoría [12:45].

Recibes categoryId en la función externa.
Devuelves una función asíncrona que ejecuta la consulta.
Defines maxPage = data.totalPages después de la primera petición.
Mantienes page++ para que la paginación avance.
Renderizas con createMovies(movies, genericSection, { lazyLoad: true, clean: false }).

¿Por qué usar clean: false en cargas posteriores? Porque no queremos limpiar los filmes ya renderizados. La primera carga puede ir con clean: true, pero las siguientes deben acumular resultados para que el scroll infinito tenga sentido.

En la navegación, cuando el usuario entra a una categoría, asignas infiniteScroll = getPaginatedMoviesByCategory(categoryId). La ejecución captura el ID, y el evento de scroll dispara la función interna cuantas veces sea necesario.

¿Qué ganas al combinar closures con infinite scroll?

Esta combinación te permite mantener una única variable global infiniteScroll que cambia su comportamiento según la ruta activa. La API de tendencias devuelve hasta 500 páginas en algunos casos [10:15], y con esta arquitectura puedes recorrerlas todas sin reescribir lógica.

Reutilizas la misma estructura para tendencias, búsquedas y categorías.
Evitas ejecutar la función al asignarla al evento de scroll.
Conservas parámetros dinámicos como query o categoryId sin variables globales.
Mantienes el control del límite de páginas con maxPage = data.totalPages.

El patrón funciona porque JavaScript trata las funciones como ciudadanos de primera clase: puedes devolverlas, pasarlas como argumentos y guardarlas en variables. Y aquí viene lo interesante: cada vez que llamas a la función externa con un parámetro distinto, obtienes una nueva función interna con su propio closure, totalmente independiente.

Si todavía sientes que el concepto de closure se te escapa, vuelve a la documentación oficial de closures en JavaScript y considera el curso específico sobre scope y closures antes de seguir avanzando. Cuéntame en los comentarios en qué otra parte de tu proyecto aplicarías este patrón.

Jason Francisco Macas Mora

Hace 4 años

Quería comentar, que agregué un patrón Throttle para evitar la repetición innecesaria de peticiones, durante el scrolling. Pueden consultar más del tema aquí. Thottle y Debounce nos ayudan a gestionar mejor la ejecución de callbacks, y peticiones, en situaciones propensas a cuellos de botella. Adjunto el repositorio de mi código.
El infinite scrolling de la vista de películas de categorías me quedó así:

const throttleGetMoviesByCategory = throttle(getMoviesByCategory, 250);

const scrollingMoviesByCategory = async () => { 
    const { page } = categoriesHistory;

    if(scrollBottomReached()){
        await throttleGetMoviesByCategory({...categoriesHistory, page: page + 1 })
    }
}

En categoriesHistory solo alamcené las variables de navegación y estado de la vista de películas por categoría:

    categoriesHistory = {
        categoryId,
        categoryName,
        page,
        total_pages,
    };

La función throttle es:

const throttle = (cb, delay = 500) => {
    let waiting = false;
    
    return async (...args) => {
        
        if (waiting) return;

        waiting = true;
 
        try {
            await cb(...args);
        }catch(err){
            console.log("Error: ", err);
        }

        await sleep(delay);
    
        waiting = false;
    }
}

y sleep, una función auxiliar para aplicar delay al código, que en este caso se usa para darle margen a la petición (promesa) de completarse, sin que concurrentemente, se inicien nuevas peticiones al mismo URL, en este caso páginación. (Misma página / datos redundantes).

const sleep = async (ms = 1000) => {
    return new Promise(resolve => setTimeout(resolve, ms));
}

Juan Castro

Profesor

Hace 4 años

:clap:

Comentarios (33)33 comentarios

Oscar Fuentes Esteves

Juan David Reyes

Guadalupe Monge Barale

Gilbert Ardila

Daniel Fernando Meneses Jaimes

Luis Angel Olivárez Estrada

Magalí Acevedo

John Jairo Rodriguez Rivas

Bramucci Candela

Diego fernando Vega Lopez

Lautaro Strappazzon

Ivan David Martinez Baron

Hace 3 años

Kevin Daniel Hincapie Lumbaque

Eliezer Hernandez

Luis Paredes

Walter Llanos

Abigail Nahomi Chávez Lozano

Axel Enrique Galeed Gutierrez

Rubén Cuello

Sebastian Giraldo

Fabián Nava Pereda

Sebastián Luna Rodríguez

Raycris Maldonado

Jesús Manuel Návar Aragón

Qué se debe optimizar en el frontend (y qué no)

Optimización y despliegue de Platzi Movies

Caché vs memoization en APIs REST

Caché del navegador vs memoization en APIs

Optimización de imágenes

Spinners vs Skeletons en pantallas de carga

Loading skeletons con CSS y keyframes

Lazy loading con IntersectionObserver

Implementación de Lazy Loading con Intersection Observer

Fallback de imágenes con evento error en JS

Paginación

Paginación vs Scroll Infinito en tu App

Paginación con botón antes del infinite scroll

Infinite Scroll sin botón en JS vanilla

Límite de páginas en infinite scroll con APIs

Closures para infinite scroll en múltiples rutas

Almacenamiento local

Almacenamiento Local con Local Storage en JavaScript

Botón de like sobre pósters con CSS y JS

Guardar películas favoritas con localStorage

Gestión de Películas Favoritas con Local Storage en JavaScript

Bonus

Selección de idioma con navigator.language

Despliegue Seguro de Aplicaciones Web y Protección de API Keys

Próximos pasos

Cierre y próximos pasos con tu portafolio

Closures para infinite scroll en múltiples rutas

Progreso del curso

Qué se debe optimizar en el frontend (y qué no)

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

Recursos

Recursos