Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

309
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!