JS递归函数未满足while循环条件时仍被额外调用问题

问题根因 #

出现额外调用的核心原因是错误地在递归函数中嵌套了while循环，同时忽略了JS函数作用域的特性：每个函数调用内的page参数是当前作用域的独立局部变量，内层递归对page的修改不会同步到外层函数作用域。
我们可以逐行拆解原代码的执行流程，就能看到重复调用的来源：

1. 首次调用testfunc(1)：当前作用域下page=1，不等于总页数3，进入while循环，page自增为2，递归调用testfunc(2)
2. 进入testfunc(2)：当前作用域下page=2，不等于3，进入while循环，page自增为3，递归调用testfunc(3)
3. 进入testfunc(3)：当前作用域下page=3，等于总页数，不进入while循环，打印终止判断日志后返回，回到上一层testfunc(2)的while循环
4. 回到testfunc(2)的while循环时，当前作用域的page值是3，不满足循环条件，循环终止，返回上一层testfunc(1)的while循环
5. 回到testfunc(1)的while循环时，当前作用域的page值还是2（内层递归修改的是其他作用域的page，和这里无关），判断2不等于3，满足循环条件，page自增为3，再次调用testfunc(3)——这就是你看到的额外一次page=3的调用。

正确实现方式 #

递归逻辑本身就负责重复发起请求，不需要额外套while循环，只需要明确定义递归终止条件即可，修复后的代码如下：

const totalPageCount = 3;
const startPage = 1;

const fetchPagedData = (currentPage) => {
  console.log("发起API请求，当前页码：", currentPage);
  console.log("当前页：", currentPage, "总页数：", totalPageCount);

  // 递归终止条件：已经拉取到最后一页，直接返回
  if (currentPage === totalPageCount) {
    console.log("全部分页数据拉取完成");
    return;
  }
  // 未到最后一页，页码+1后递归拉取下一页
  fetchPagedData(currentPage + 1);
};

fetchPagedData(startPage);

运行上述代码后，只会按顺序请求第1、2、3页，拉取完第3页后直接终止，不会出现额外的重复调用。

实际业务场景中，不建议把总页数设为固定全局变量，最好每次拿到API响应后，从响应体里读取最新的pageCount字段判断终止条件，避免接口总页数动态变化时逻辑出错。

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