0
313
Views¿Por qué mi RAM se sobrecarga cuando ejecuto la función javascript?
Así que tengo un sitio web para buscar películas con API de películas, y estoy tratando de hacer una paginación numerada para hacer clic entre diferentes páginas de API. Paginación: 
Función para obtener URL, dentro de la cual hice la función foreach para hacer clic en diferentes elementos li:
function fetchURL(url){ lastUrl = url; fetch(url) .then(res => res.json()) .then(data =>{ trendingMovies(data.results); currentPage = data.page; nextPage = currentPage + 1; prevPage = currentPage - 1; totalPages = data.total_pages; lastPage = totalPages; if(currentPage <= 1){ prev.classList.add('disabled'); next.classList.remove('disabled'); } else if(currentPage >= lastPage){ prev.classList.remove('disabled'); next.classList.add('disabled'); }else{ prev.classList.remove('disabled'); next.classList.remove('disabled'); } [].forEach.call(liTag,function(el){ el.addEventListener('click', function (e) { for (let i = 0; i < totalPages; i++) { if(totalPages[i] < totalPages[i-1]){ pageCall(nextPage); e.target.classList.add('active'); } else if(totalPages[i] ) } }) }) }) }Función para dividir la URL de la API para usar páginas:
function pageCall(page){ let urlSplit = lastUrl.split('?'); let queryParams = urlSplit[1].split('&'); let key = queryParams[queryParams.length -1].split('='); if(key[0] != 'page'){ let url = lastUrl + '&page=' + page; console.log(lastUrl); fetchURL(url); }else{ key[1] = page.toString(); let a = key.join('='); queryParams[queryParams.length -1] = a; let b = queryParams.join('&'); let url = urlSplit[0] + '?' + b; fetchURL(url); } }Entonces, cuando hago clic en diferentes elementos li, las páginas API cambian, pero después de hacer clic 2 o 3 veces, mi RAM de repente se sobrecarga por el navegador, y el navegador simplemente se retrasa y deja de responder.
RAM cuando se ejecuta la función: 
Supongo que el problema puede ser que declaro la función fetchurl() y la uso dentro de un pageCall(), y luego uso ese pageCall() dentro de un fetchUrl(), por lo que puede ser una sobrecarga de funciones, pero no lo estoy realmente seguro.
1 answers
Answer question0
CADA vez que llame, agregue este detector de eventos: el.addEventListener('click', function (e) { - muévalo y delegue y asegúrese de no hacer llamadas circulares
Prueba con este código. No puedo probarlo porque no diste la URL y el HTML
document.getElementbyId('nav').addEventListener('click', function(e) { const tgt = e.target.closest('li'); if (tgt) { for (let i = 0; i < totalPages; i++) { if (totalPages[i] < totalPages[i - 1]) { pageCall(nextPage); tgt.classList.add('active'); } } } }) function pageCall(page) { let url = new URL(lastUrl) url.searchParams.set("page", page) fetchURL(url.toString()); } function fetchURL(url) { lastUrl = url; fetch(url) .then(res => res.json()) .then(data => { trendingMovies(data.results); currentPage = data.page; nextPage = currentPage + 1; prevPage = currentPage - 1; totalPages = data.total_pages; lastPage = totalPages; if (currentPage <= 1) { prev.classList.add('disabled'); next.classList.remove('disabled'); } else if (currentPage >= lastPage) { prev.classList.remove('disabled'); next.classList.add('disabled'); } else { prev.classList.remove('disabled'); next.classList.remove('disabled'); } }) }