JavaScript分页按钮始终跳转至最后一页的问题排查与解决

这是典型的闭包作用域陷阱：

• 你写的循环里，i没有用let声明，会自动变成全局变量。所有按钮的点击回调（箭头函数）都共享同一个i的引用，而不是各自拿到当前循环的页码值。
• 循环执行速度远快于用户点击操作，等你点按钮的时候，循环早就跑完了，此时i的值已经是last_page + 1（因为循环条件是i <= last_page，最后一次循环结束后i会自增到超出范围）。你的changePageNumber函数大概率会把超出范围的页码默认处理成最后一页，所以看起来点任何按钮都跳最后一页。

三种简单可行的方法，选一种用就行：

方法1：给循环变量加let（最简洁推荐） #

把循环里的i改成块级作用域变量，每次循环都会生成一个独立的i，每个按钮的回调捕获的都是当前循环的页码值：

for (let i = 1; i <= last_page; i++) {
  let button = document.createElement('button');
  button.innerText = i;
  paginationButtons.appendChild(button);
  button.addEventListener('click', () => changePageNumber(i));
}

方法2：用立即执行函数隔离作用域 #

通过立即执行函数（IIFE）把当前循环的i封装成独立参数，避免所有回调共享同一个引用：

for (var i = 1; i <= last_page; i++) {
  let button = document.createElement('button');
  button.innerText = i;
  paginationButtons.appendChild(button);
  // 用立即执行函数保存当前页码
  (function(pageNum) {
    button.addEventListener('click', () => changePageNumber(pageNum));
  })(i);
}

方法3：给按钮加自定义属性存页码 #

把页码存在按钮的data-*属性里，点击时直接读取这个属性的值：

for (i = 1; i <= last_page; i++) {
  let button = document.createElement('button');
  button.innerText = i;
  button.dataset.page = i; // 将页码存储到data-page属性
  paginationButtons.appendChild(button);
  button.addEventListener('click', function() {
    // 读取属性并转换为数字类型
    changePageNumber(parseInt(this.dataset.page));
  });
}

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