JS调用setInterval时传入的remainingTime参数无法递减如何解决

• JS中数字属于基本数据类型，参数传递遵循按值传递规则：你调用setInterval时传入的remainingTimeToSolveQuiz是将100这个值复制了一份传给回调函数，后续每次quizCountDown执行时拿到的都是初始复制的100，不是外层变量的引用。
• 你在函数内对remainingTime做递减操作，修改的只是当前函数作用域内的局部变量，不会影响下次回调拿到的参数值，所以每次执行都是100减1得到99，无法持续递减。
• 额外存在两个代码问题：你定义的定时器变量是quizTimer，但清除定时器时写的是clearTimeout(timer)，执行到0时会抛出变量未定义错误；另外setInterval对应的标准清除方法是clearInterval，用clearTimeout虽然部分浏览器兼容但不符合规范。

方案1：直接操作外层时间变量（实现简单） #

不需要将时间作为参数传入，直接修改外层作用域的时间变量即可：

let remainingTimeToSolveQuiz = 100;
const timeRemainingEl = document.querySelector("#time-remaining");

function quizCountDown(elementToDisplayTime) {
  remainingTimeToSolveQuiz--;
  console.log(remainingTimeToSolveQuiz);

  if (remainingTimeToSolveQuiz === 0) {
    clearInterval(quizTimer);
  }
  elementToDisplayTime.textContent = remainingTimeToSolveQuiz;
}

let quizTimer = setInterval(quizCountDown, 1000, timeRemainingEl);

方案2：用闭包实现完全可复用的倒计时（不依赖全局变量） #

如果需要实现多实例复用、互不干扰的倒计时功能，可以用闭包保存时间状态：

// 可复用的倒计时生成函数
function createQuizCountDown(initialTime, elementToDisplayTime) {
  let remainingTime = initialTime;
  return function() {
    remainingTime--;
    console.log(remainingTime);
    if (remainingTime === 0) {
      clearInterval(quizTimer);
    }
    elementToDisplayTime.textContent = remainingTime;
  }
}

const timeRemainingEl = document.querySelector("#time-remaining");
// 生成对应倒计时回调
const countDownCallback = createQuizCountDown(100, timeRemainingEl);
let quizTimer = setInterval(countDownCallback, 1000);

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