JavaScript-innerHTML在setInterval中不独立运行

JavaScript - innerHTML does not run independently in setInterval

本文关键字：独立 运行 setInterval JavaScript-innerHTML      更新时间：2023-09-26

这是我的第一个JS问题。我有一个在setInterval中的函数。所以这个函数会被重复。

function chooseAnswer() {
correct.onclick = function() {
    if (range == 0) {
        score++;
        isGameOver = false;
    }
    else {
        isGameOver = true;
    }
}
incorrect.onclick = function() {
    if (range != 0) {
        score++;
        isGameOver = false;
    }
    else {
        isGameOver = true;
    }
}
// Display score
displayScore.innerHTML = score;
}

一切都很完美，除了分数（innerHTML）在触发onlick后不会立即更新。它等待下一轮时间间隔进行更新。但是，如果我移动

displayScore.innerHTML = score;

并将其放在之后

score++;

在任一if语句中，在触发onlick后，分数将立即更新。为什么会发生这种情况？这个函数不是独立工作而不管setInterval吗？也就是说，它逐行执行，所以

displayScore.innerHTML = score;

将立即更新，不必等到下一轮。

这更多的是一个注释，但因为它太长了，我将在这里写它：

这与循环中的continue无关。当调用chooseAnswer时，无论是手动调用还是由setInterval调用。然后执行三个语句：

  1. 回调到correct.onclick的分配
  2. 回调到incorrect.onclick的分配
  3. displayScore.innerHTML = score;

回调本身当时只是存储在onclick中，但此时并没有执行/评估它们。只有当您单击correct或incorrect时，浏览器才会检查回调是否存储在onclick中，如果有回调，则会执行回调。但这个回调只包含以下代码：

function() {
  if (range == 0) {
    score++;
    isGameOver = false;
  } else {
    isGameOver = true;
  }
}

以下代码与您的代码等效，但具有另一种结构，可能更容易理解：

function correctCallback() {
  if (range == 0) {
    score++;
    isGameOver = false;
  } else {
    isGameOver = true;
  }
}
function incorrectCallback() {
  if (range != 0) {
    score++;
    isGameOver = false;
  } else {
    isGameOver = true;
  }
}
function chooseAnswer() {
  correct.onclick = correctCallback; //correctCallback is not call but just assigned to correct.onclick
  incorrect.onclick = incorrectCallback; //incorrectCallback is not call but just assigned to correct.onclick
  // Display score
  displayScore.innerHTML = score;
}

此外，在该间隔中一次又一次地重写CCD_ 11是没有意义的。

相关文章：