setInterval 不重复

Question

我试图每 4 秒更改一次背景，但它直接跳到第二个条件并且不再更改。为什么会这样？

var time = 1;
var func = function () {
    'use strict';

    if (time === 1) {
        document.getElementById("top-background").style.backgroundColor = "#000";
        time += 1;
    }

    if (time === 2) {
        document.getElementById("top-background").style.backgroundColor = "#aaa";
        time += 1;
    }

    if (time === 3) {
        document.getElementById("top-background").style.backgroundColor = "#d5d5d5";
        time -= 2;
    }

};

setInterval(func, 4000);

Answer 1

尝试使用 else if

var func = function () {
    'use strict';

    if (time === 1) {
        document.getElementById("top-background").style.backgroundColor = "#000";
        time += 1;
    }

    else if (time === 2) {
        document.getElementById("top-background").style.backgroundColor = "#aaa";
        time += 1;
    }

    else if (time === 3) {
        document.getElementById("top-background").style.backgroundColor = "#d5d5d5";
        time -= 2;
    }

};

Answer 2

当时间等于 1 时，您将时间加 1。这使得时间等于 2。之后，您检查时间是否等于 2，它是！这让你继续向上，直到你到达时间等于 3 的点，然后你再次将它重置为 1。

您需要一种方法来仅检查一个条件。您可以使用 if 和 elseifs:

if (time == 1) {
  // Code...
} else if (time == 2) {
  // Code...
} else {
  // Code...
  // Because it's not equal to 1 or 2, it must be 3.
}

或者，您也可以使用 Javascript 的 Switch 语句。

switch(time) {
  case 1:
    // Code...
      break;
  case 2:
    // Code...
    break;
  case 3:
    // Code...
    break;
  default:
    // Something went wrong and it's not 1, 2, or 3
  }

setInterval 不重复

setInterval not repeating

javascript

intervals

web