Блог

Итак, у меня есть веб-сайт для поиска фильмов с помощью API фильмов, и я пытаюсь сделать нумерацию страниц для перехода между различными страницами API. Пагинация:

Функция для извлечения URL-адреса, внутри которой я сделал функцию foreach для нажатия на различные элементы li:

 function fetchURL(url){  lastUrl = url;  fetch(url)  .then(res =gt; res.json())  .then(data =gt;{  trendingMovies(data.results);  currentPage = data.page;  nextPage = currentPage   1;  prevPage = currentPage - 1;  totalPages = data.total_pages;  lastPage = totalPages;   if(currentPage lt;= 1){  prev.classList.add('disabled');  next.classList.remove('disabled');  }  else if(currentPage gt;= 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 lt; totalPages; i  ) {  if(totalPages[i] lt; totalPages[i-1]){  pageCall(nextPage);  e.target.classList.add('active');  }  else if(totalPages[i] )  }  })  })  })  }  

Функция разделения URL API для использования страниц:

 function pageCall(page){  let urlSplit = lastUrl.split('?');  let queryParams = urlSplit[1].split('amp;');  let key = queryParams[queryParams.length -1].split('=');   if(key[0] != 'page'){  let url = lastUrl   'amp;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('amp;');  let url = urlSplit[0]   '?'   b;  fetchURL(url);  }  }  

Поэтому, когда я нажимаю на разные элементы li, страницы API меняются, но после нажатия 2 или 3 раза моя оперативная память внезапно перегружается браузером, и браузер просто отстает и перестает отвечать.

Оперативная память при запуске функции:

Я предполагаю, что проблема может заключаться в том, что я объявляю функцию fetchurl() и использую ее внутри вызова страницы (), а затем использую этот вызов страницы() внутри вызова страницы (), так что это может быть перегрузка какой-то функции, но я не совсем уверен.

КАЖДЫЙ раз, когда вы звоните, вы добавляете этот прослушиватель событий: el.addEventListener («щелчок», функция (e) { — переместите его и делегируйте и убедитесь, что вы не совершаете циклические вызовы

Попробуйте воспользоваться этим кодом. Я не могу проверить это, потому что вы не указали URL и HTML

 document.getElementbyId('nav').addEventListener('click', function(e) {  const tgt = e.target.closest('li');  if (tgt) {  for (let i = 0; i lt; totalPages; i  ) {  if (totalPages[i] lt; 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 =gt; res.json())  .then(data =gt; {  trendingMovies(data.results);  currentPage = data.page;  nextPage = currentPage   1;  prevPage = currentPage - 1;  totalPages = data.total_pages;  lastPage = totalPages;  if (currentPage lt;= 1) {  prev.classList.add('disabled');  next.classList.remove('disabled');  } else if (currentPage gt;= lastPage) {  prev.classList.remove('disabled');  next.classList.add('disabled');  } else {  prev.classList.remove('disabled');  next.classList.remove('disabled');  }  }) }