设置超时不递减参数值

Question

我正在尝试使我的 setTimeout 函数可重用。但是每当我传递 remainingTime 值时，它都不会递减。

console.log(remainingTime); 重复 returns 99 而不是递减即 98, 97.

有什么想法吗？

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

function quizCountDown(remainingTime, elementToDisplayTime) {

  remainingTime--;
  console.log(remainingTime);

  if (remainingTime === 0) {
    // something
    clearTimeout(timer);
  }
  elementToDisplayTime.textContent = remainingTime;
}

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

<div>
Time: <span id="time-remaining"></span>
</div>

Answer 1

您正在将 remainingTimeToSolveQuiz 的初始值传递给 setInterval。这是按值传递的，因此它不会随着每个循环而改变。

所以基本上每次 quizCountDown 函数运行时，它都使用 100 的初始值而不是更新后的值。

删除传递到间隔中的 remainingTimeToSolveQuiz，而只使用 quizCountDown 函数中的真实变量。

还要确保您的 quizTimer 变量已初始化，并且您在 clearTimeout 中正确引用了它。

let quizTimer;

function quizCountDown(elementToDisplayTime) {

  remainingTimeToSolveQuiz--;
  console.log(remainingTime);

  if (remainingTimeToSolveQuiz === 0) {
    // something
    clearTimeout(quizTimer);
  }
  elementToDisplayTime.textContent = remainingTimeToSolveQuiz;
}

quizTimer = setInterval(quizCountDown, 1000, timeRemainingEl);

附带说明一下，如果您想测量准确的时间，我真的不建议使用 setInterval 或 setTimeout。它将始终是一个近似值。

如果您将间隔设置为 1000 毫秒，它总是会有几毫秒的偏差，这会在更长的时间内累积起来造成很大的不准确性。

一种更有效的方法是使用时间戳来计算自存储的初始起点以来经过的时间。

Answer 2

您的 setInterval 每隔一秒调用一次该函数。每次调用它时，您都会传递相同的参数，其中之一是 100 的值。因此，每次调用您的函数时，您都会传递 100 并且您的函数会按照要求执行，减去 1。这就是为什么您会看到 99 重复。

解决方法：用于跟踪时间的全局变量：

let quizTime = 100; // global variable stores the quiz time

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

function quizCountDown(elementToDisplayTime) {

  if (quizTime === 0) {
    // something
    clearTimeout(quizTimer);
  }
  elementToDisplayTime.textContent = quizTime;
  
  console.log(quizTime);
  quizTime--; // Calling this last starts your quiz timer with 100
}

quizTimer = setInterval(quizCountDown, 1000, timeRemainingEl);

<div>
Time: <span id="time-remaining"></span>
</div>

此外，最后调用 quizTime-- 也很有帮助。因为那时你的计时器最初会显示 100。

设置超时不递减参数值

Set Timeout not decrementing param value

javascript

ecmascript-6

settimeout