运行JavaScript分页功能时浏览器RAM过载卡顿无响应是什么原因？

AI 小北

2026-9-26

问题根因

核心问题是事件监听器重复绑定：你把li元素的点击事件绑定逻辑写在了fetchURL函数的回调里，每次调用fetchURL拉取接口数据后，都会给所有分页li元素新增一个点击事件监听器，不会自动覆盖之前绑定的事件。点击几次分页后，单个li元素会绑定数十甚至上百个重复的点击事件，每次点击li就会触发几十次pageCall，进而触发几十次fetchURL，同时又会新增更多的事件监听器，形成恶性循环，内存占用指数级上涨最终导致浏览器卡顿崩溃。
次要问题是点击事件内部逻辑错误：totalPages是总页数的数字类型值，你把它当作数组遍历totalPages[i]是完全无效的逻辑，这段残缺的判断也会导致额外的异常执行开销。
你猜测的循环调用不是根因，正常的分页跳转触发的互相调用是单次的，不会导致内存暴涨，问题出在重复触发的调用量级太高。

解决方案

把事件绑定逻辑从fetchURL中移出，全局只绑定一次
不要每次接口返回都重新绑事件，页面初始化完成、分页li元素渲染完毕后，一次性绑定点击事件即可。如果你的分页li是动态渲染的，推荐使用事件委托绑定到父元素，避免动态新增元素后绑定失效。
示例修改代码：

// 页面初始化时执行一次即可，不要放在fetchURL里
// 注意渲染分页li时给每个元素加data-page属性存储对应的页码值，比如<li data-page="2">2</li>
[].forEach.call(liTag,function(el){
  el.addEventListener('click', function (e) {
    const targetPage = Number(e.target.dataset.page)
    // 和当前页相同就不请求，避免无效调用
    if(targetPage === currentPage) return
    pageCall(targetPage)
    // 统一处理active状态
    liTag.forEach(item => item.classList.remove('active'))
    e.target.classList.add('active')
  })
})

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');
    }
    // 删除原来这里的事件绑定逻辑即可
  })
}

如果你一定要在动态渲染分页后重新绑定事件，要先移除之前的事件监听器，需要把点击处理函数提取为独立的命名函数，方便移除：

// 提取为独立的命名处理函数
function handlePageClick(e) {
  const targetPage = Number(e.target.dataset.page)
  if(targetPage === currentPage) return
  pageCall(targetPage)
  liTag.forEach(item => item.classList.remove('active'))
  e.target.classList.add('active')
}

// 每次绑定前先移除旧的事件监听，避免重复绑定
[].forEach.call(liTag,function(el){
  el.removeEventListener('click', handlePageClick)
  el.addEventListener('click', handlePageClick)
})

可以额外加防抖逻辑避免用户短时间多次点击分页触发大量重复请求，进一步优化性能。

内容的提问来源于stack exchange，提问作者Carl