Javascript设置超时延迟-I'；我试了又试，但这只是赢了'；不要慢下来_Javascript_Html

Javascript设置超时延迟-I'；我试了又试，但这只是赢了'；不要慢下来

javascript html

Javascript设置超时延迟-I'；我试了又试，但这只是赢了'；不要慢下来,javascript,html,Javascript,Html,这段代码应该一次更改一个图像。我不会详细介绍，但它必须使用一个数组来控制图像。问题是，图像更改之间没有延迟。我已经调查了其他人在setTimeout中遇到的问题，但看不出我做得不对我知道可能有更简洁的方法来实现这一点，但我正试图使用易于解释的代码块来保持它的简单性 <html lang="en"> <head> <script> var array=[0,0,0,0,0]; function updateligh

这段代码应该一次更改一个图像。我不会详细介绍，但它必须使用一个数组来控制图像。问题是，图像更改之间没有延迟。我已经调查了其他人在setTimeout中遇到的问题，但看不出我做得不对

我知道可能有更简洁的方法来实现这一点，但我正试图使用易于解释的代码块来保持它的简单性

<html lang="en">
<head>


    <script>
        var array=[0,0,0,0,0];

        function updatelights() {
            if (array[0]==1) {
                document.images.light1.src="lighton.png";
            }
            else {
                document.images.light1.src="lightoff.png";
            }
            if (array[1]==1) {
                document.images.light2.src="lighton.png";
            }
            else {
                document.images.light2.src="lightoff.png";
            }
            //other if statements here as above
        }

        function animatelights() {
            light1on();
            setTimeout(updatelights,1000);
            light2on();
            setTimeout(updatelights,1000);
            light3on();
            setTimeout(updatelights,1000);
            light4on();
            setTimeout(updatelights,1000);
            light5on();
            setTimeout(updatelights,1000);
        }

        function light1on() {
            array=[1,0,0,0,0];
        }
        function light2on() {
            array=[0,1,0,0,0];
        }
        function light3on() {
            array=[0,0,1,0,0];
        }
        function light4on() {
            array=[0,0,0,1,0];
        }
        function light5on() {
            array=[0,0,0,0,1];
        }

    </script>

</head>

<body>

    <!-- This is an HTML table with five columns. There is an image in each column-->
    <table style="width:100%">
        <tr>
            <td><img name="light1" src="lightoff.png"></td>
            <td><img name="light2" src="lightoff.png"></td> 
            <td><img name="light3" src="lightoff.png"></td>
            <td><img name="light4" src="lightoff.png"></td>
            <td><img name="light5" src="lightoff.png"></td>
        </tr>
    </table>

    <!-- This is an HTML button -->
    <button type = "button" onclick="animatelights()"> Animate </button>

</body>
</html>


变量数组=[0,0,0,0,0]；
函数updatelights（）{
if（数组[0]==1）{
document.images.light1.src=“lighton.png”；
}
否则{
document.images.light1.src=“lightoff.png”；
}
if（数组[1]==1）{
document.images.light2.src=“lighton.png”；
}
否则{
document.images.light2.src=“lightoff.png”；
}
//此处的其他if语句如上所述
}
函数animatelights（）{
light1on（）；
setTimeout（updatelights，1000）；
light2on（）；
setTimeout（updatelights，1000）；
light3on（）；
setTimeout（updatelights，1000）；
light4on（）；
setTimeout（updatelights，1000）；
light5on（）；
setTimeout（updatelights，1000）；
}
函数light1on（）{
数组=[1,0,0,0]；
}
函数light2on（）{
数组=[0,1,0,0,0]；
}
函数light3on（）{
数组=[0,0,1,0,0]；
}
函数light4on（）{
数组=[0,0,0,1,0]；
}
函数light5on（）{
数组=[0,0,0,0,1]；
}
使有生气

设置超时

不是睡眠功能

它将您传递给它的函数放入队列，以便在以下情况下稍后调用：

指定的时间已过，并且
JS事件循环没有忙于运行另一个函数

您一个接一个地调用

lightNon

函数，然后在大约一秒钟后调用

updatelights

5次

解决这一问题的一般方法是：

将

lightNon

函数替换为函数数组（或者更好的是，使用数据数组的函数）

创建一个变量来跟踪下一步要处理的数组索引

使用

setInterval

每秒运行一个函数：

设置数组
调用update函数
递增跟踪索引的变量

当我看到这个：

    light1on();
    setTimeout(updatelights,1000);
    light2on();
    setTimeout(updatelights,1000);
    light3on();
    setTimeout(updatelights,1000);
    light4on();
    setTimeout(updatelights,1000);
    light5on();
    setTimeout(updatelights,1000);

看起来您希望事情一行一行地进行，但代码并没有按那个顺序执行。setTimeout是非阻塞的，这意味着该代码的实际顺序为：

light1on();
light2on();
light3on();
light4on();
light5on();

然后一秒钟后，所有updatelights都被调用：

  updatelights(); //from setTimeout
  updatelights(); //from setTimeout
  updatelights(); //from setTimeout
  updatelights(); //from setTimeout
  updatelights(); //from setTimeout

所以解决方案应该是这样的：

var arr = [light1on, light2on, light3on, light4on, light5on];
var i = 1;

arr[0]();
var si = setInterval(function(){
  if(i >= arr.length){
    clearInterval(si);
  }
  arr[i]();
  i++
  updatelights();
}, 1000);

 function second()
 {
   alert("ok");
 }

setTimeout(second,100);

这是错误的做法

setTimeout（）

不会暂停或停止执行。它会在给定时间后执行某些代码。您可以使用回调函数来防止执行以下操作：

var arr = [light1on, light2on, light3on, light4on, light5on];
var i = 1;

arr[0]();
var si = setInterval(function(){
  if(i >= arr.length){
    clearInterval(si);
  }
  arr[i]();
  i++
  updatelights();
}, 1000);

 function second()
 {
   alert("ok");
 }

setTimeout(second,100);

function secondFunction（）{
警报（“1秒后”）；
}
设置超时（第二个函数，1000）

问题是因为您正在立即更改

数组
您想在延迟（setTimeout
）后调用light2on
（etc）。正确的方法是在setTimeout
回调函数中调用它。您必须在更新指示灯
之前打开灯[号码]。
对每一个执行以下操作：
setTimeout(function(){light2on();updatelights()},1000)

但是间隔会更快，并且不需要创建这些函数和全局变量。
您有很多不必要的代码。如果我试图从你的例子中学习这些东西，我会完全困惑。我冒昧地简化了你的例子

HTML（我在图像中添加了一个类名）

使有生气

和JS..
// URL for the on light
var lightsOn = "http://info.sonicretro.org/images/1/1b/Reddot.gif";

// URL for the off light
var lightsOff = "http://antigonishoptical.ca/images/black-dot.png";

// The active light (you don't need an array since you only have one light on at a time)
var activeLight = 0;

function animatelights() {

    // Get an array of your images by adding a class name to them
    var lights = document.getElementsByClassName('rotateImage');

    // Loop thru the image and turn all the lights off
    for(var i=0; i<lights.length; i++) lights[i].src = lightsOff;

    // Then turn on the light that is currently active
    lights[activeLight].src = lightsOn;

    // increment the active light variable so the next light lights up next time
    activeLight++;

    // Check to see if we've gone through all inputs. If we have the cirrent index won't exists, 
    // so we reset it back to zero
    if('undefined' === typeof lights[activeLight]) activeLight = 0;

    // After three seconds, call the function again recursively
    setTimeout(animatelights, 3000);
}

//打开指示灯的URL
var lightsOn=”http://info.sonicretro.org/images/1/1b/Reddot.gif";
//关闭指示灯的URL
var lightsOff=”http://antigonishoptical.ca/images/black-dot.png";
//活动灯光（您不需要阵列，因为一次只打开一个灯光）
var-activeLight=0；
函数animatelights（）{
//通过向图像添加类名来获取图像数组
var lights=document.getElementsByClassName（'rotateImage'）；
//在图像中循环并关闭所有灯
对于（var i=0；i使用调试器，它会准确地向您显示正在发生的事情。提示：setTimeout
不会阻塞。setTimeout不会暂停执行。它不是睡眠，所以它之后的所有行都会运行。明白了！现在我明白了为什么它不工作了，这总是好的。我会绞尽脑汁使用setInterval函数。不要重复ion他使用的是全局变量…我在chrome的控制台上测试过，只有最后一盏灯亮着。当然，先生。