Why my RAM gets overloaded when I run javascript function?

Carl

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.

mplungjan

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Why does my iex return a '-C' or a '-A' when I run this function

why my javascript can't be run when I click the button

JavaScript - Why doesn't my code run when "Document.querySelector().value" is outside function + how do I get function to run on input number change?

Why my design gets disappear when I use <TouchableWithoutFeedback>?

Why does my input not update when I run it in my browser? - Javascript

Why am I getting a 404 when I run my Azure Function locally?

Why isn't my code working inside a function I created, but works when I run it in the global environment?

Why is nothing being passed to my overloaded function?

My UI gets distorted when I run it through my device(USB debugging) but works fine on my AVD

Why are my class properties undefined when i run a function which is tied to an onclick attribute?

Why won't my HTML button run my JavaScript function?

Why does my javascript not work when I use an if statement in my function

Why are my buttons transparent when I run on my device?

Why is my SKShapeNode subclass not appearing when I run my app?

Why i got that problems when i run my script?

Why does lshw command on ubuntu shows me ram information different from what I see on my ram when opening my laptop?

Why do I get `java.lang.NoClassDefFoundError: scala/Function1` when I run my code in ScalaIDE?

Why is my program skipping the gets() function?

Why my struct created in function gets overwritten?

Why is my Javascript function not being called when I have invoked it in OnClientClick

My app gets stuck on a white screen that says copyright stuff when i run it in a ios simulator

when ever I try to run my Flutter program, it gets stuck at “Running Gradle task 'assembleDebug”

Why I get +1 of my string length when I use gets?

Why am I missing 2% of my ram

Why won't my buttons appear when I run this JFrame?

Why is Paypal giving an error when I run my subscription form?

Why is my Register page appearing when I run login page?

Why does bootstrap not show up when I run my website?

Why is my Android Simulator black when I run Xamarin forms?