为什么当我运行 javascript 函数时我的 RAM 会过载？

Question

所以我有一个使用电影 API 搜索电影的网站，我正在尝试进行编号分页以在不同的 API 页面之间单击。 分页：

获取URL的函数，其中我做了foreach函数来点击不同的li项目：

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

API url 拆分为使用页面的功能：

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

所以当我点击不同的li项API页面发生变化，但点击2或3次后，我的RAM突然被浏览器超载，浏览器只是滞后并停止响应。

函数运行时的内存：

我想问题可能是我声明了 fetchurl() 函数并在 pageCall() 中使用它，然后在 fetchUrl() 中使用该 pageCall()，所以它可能是一些函数重载，但我我不太确定。

Answer 1

每次调用时都添加此事件侦听器：el.addEventListener('click', function (e) { - 将其移出并委托并确保不进行循环调用

试试这个代码。我无法测试它，因为您没有提供 URL 和 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');
      }
    })
}