Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

311
Visualizações
Why my RAM gets overloaded when I run javascript function?

So I have a website for searching movies with movie API, and i'm trying to make a numbered pagination to click between different API pages. Pagination: enter image description here

Fuction for fetching URL, inside of which i made foreach function to click on different li items:

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] )
                  }
              })
          })
        })
    }

Function for splitting API url to use pages:

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);
        }
    }

So when I click on different li items API pages change, but after clicking 2 or 3 times, my RAM suddenly gets overloaded by browser, and browser just lags and stops responding.

RAM when function runs: enter image description here

I guess the problem may be that I declare fetchurl() function and use it inside of a pageCall(), and then use that pageCall() inside of a fetchUrl(), so it may be some function overloading, but I'm not really sure.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

EVERY time you call you add this event listener: el.addEventListener('click', function (e) { - move it out and delegate and make sure you do not make circular calls

Have a go with this code. I cannot test it because you did not give the URL and the 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');
      }
    })
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda