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:
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.
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.
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.
Comments