Question

每次按下按钮，我都需要将图像从一个更改为另一个。我尝试过使用SetTimeout，setInterval等，这些似乎都没有用？我不确定我做错了什么

var list = [
  "https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg",
  "https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg",
  "https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg",
  "http://thndl.com/images/1_3.png"
];

var index = 0;

function changeLights() {
  index = index + 1;
  if (index == list.length) 
    index = 0;
  
  var myVar = setInterval(function() {
    ChangeLights()
  }, 1000);
}

}();

Answer 1

您正在呼叫ChangeLights而不是changeLights。但即使你正确地调用它，你也可以创建一个间隔，每隔1000毫秒调用相同的函数。这意味着在第二次调用时，它会创建一个新的间隔并再次调用它，实际的间隔也会调用该函数。

解决方案：单独初始化间隔和执行工作的功能。

从startLights开始，并在间隔中调用changeLights。

var list = [
  "https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg",
  "https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg",
  "https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg",
  "http://thndl.com/images/1_3.png"
];

var index = 0;

function changeLights() {
    index = index + 1;
    if (index == list.length) {
        index = 0;
    }
    console.log(index);
}

function startLights() {
    setInterval(changeLights, 1000);
}

<button type="button" onclick="startLights()">Change Lights</button>

Answer 2

错误

changeLights() != ChangeLights()

警告

是setInterval()放置

在点击功能中不应用setInterval()。在每次循环时间秒减少。所以它的更改时间更短。使用setInterval与点击和颜色change是分开的< / p>

var list = [ "https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg", "https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg", "https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg", "http://thndl.com/images/1_3.png" ]; var index = 0; function change() { index = index + 1; if (index == list.length) index = 0; console.log(list[index]) } function changeLights(){ var myVar = setInterval(function() { change() }, 1000); }

<button type="button" onclick="changeLights()">Change Lights</button>

Answer 3

如上面的答案所示 - 对函数的调用需要在它之外。我建议的一个改变是使用模数运算符（索引％3），这将允许图像的恒定循环，而不需要if语句。这是因为模数运算符在运算符除以数之后给出余数 - 因此模数％3将意味着例如如果index为3 - 余数为0,4则给出1 5给出2然后6则返回0。所以你有一个完美的骑行计数给出三个值0,1和2，而不必检查每一个。

var list = [
  "https://assets.publishing.service.gov.uk/media/559fbe1940f0b6156700004d/traffic-light-red.jpg",
  "https://assets.publishing.service.gov.uk/media/559fbe48ed915d1592000048/traffic-light-amber.jpg",
  "https://assets.publishing.service.gov.uk/media/559fbe3e40f0b6156700004f/traffic-light-green.jpg",
  "http://thndl.com/images/1_3.png"
];

var index = 0;

function changeLights() {
  index +=1;
  document.getElementById('imageSrc').textContent = 'Source: ' + list[index %3];
  document.getElementById('lights').src = list[index %3];
}

  var myVar = setInterval(function() {
    changeLights()
  }, 1000);

<p id="imageSrc"></p>
<img id = "lights"/>

SetInterval不会工作？每次都必须按下按钮

3 个答案: