如何正确使用全局变量？分页脚本中页码无法递增问题排查

我有一个分页脚本，正尝试递增当前页码以通过AJAX调用下一页，但遇到了问题。

在初始TypeScript文件中，我这样声明全局变量：

declare var getCurrentPage: number;

随后在同一文件中，我通过初始AJAX请求的返回值为其赋值：

globalThis.getCurrentPage = data && data.startPage;
currentPage: getCurrentPage || 0,

这样定义是因为currentPage可能为其他值，若getCurrentPage获取失败或不存在则设为0。

现在在另一个独立的分页文件中（因初始值来自AJAX请求），我尝试递增数值并赋值回全局变量：

const nextPage = this.currentPage + 1;
globalThis.getCurrentPage = nextPage;

但结果显示nextPage值始终为1，currentPage值始终为0，每次点击“Next Page”按钮都是如此，因为0+1=1……

请问我哪里操作错误？

问题分析与修复方案 #

核心问题 #

你当前的代码存在局部变量与全局变量未同步更新的问题：

• 初始时你仅将全局getCurrentPage的值赋值给了局部的this.currentPage，但后续点击按钮时，你始终基于这个从未更新过的局部this.currentPage（初始值为0）计算下一页，导致每次都是0+1=1。
• 你更新了全局变量，但局部的this.currentPage并没有随之同步，形成了数据不一致。

修复步骤 #

1. 修正全局变量的初始赋值逻辑
   原代码中globalThis.getCurrentPage = data && data.startPage;存在隐患：如果data.startPage为0（合法的页码值），&&会将其视为假值，最终导致globalThis.getCurrentPage被赋值为undefined。应该使用可选链和空值合并运算符来安全赋值：

   globalThis.getCurrentPage = data?.startPage ?? 0;
   currentPage: globalThis.getCurrentPage;
   

2. 确保分页操作时使用最新的全局变量值
   在分页文件中，不要依赖可能过时的局部this.currentPage，而是直接基于全局变量计算下一页，同时同步更新局部变量：

   // 获取最新的全局页码值，兜底为0
   const currentPage = globalThis.getCurrentPage || 0;
   const nextPage = currentPage + 1;
   // 同步更新全局和局部变量
   globalThis.getCurrentPage = nextPage;
   this.currentPage = nextPage;
   

   或者更简洁的写法：

   globalThis.getCurrentPage = (globalThis.getCurrentPage || 0) + 1;
   // 同步更新局部变量
   this.currentPage = globalThis.getCurrentPage;
   

额外建议 #

全局变量虽然能跨文件共享状态，但容易导致数据不一致和难以维护的问题。如果项目规模允许，建议使用状态管理方案（比如自定义状态类、RxJS等）来统一管理分页状态，避免直接依赖全局变量。

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