使用JavaScript按顺序显示一系列颜色

我需要在我的ASP.NET网页中显示一系列RGB颜色。我希望使用ASP更新面板来实现这一点，但是更新必须在没有用户干预的情况下按顺序进行，每4或5秒一次

我的初始JavaScript代码如下所示：

document.getElementById('div').style.backgroundColor = "rgb(0,0,255)";

问题是获取要显示的下一个RGB颜色组合。 我在另一篇文章中尝试了等待“循环”：

wait(7000); //7 seconds in milliseconds

function wait(ms) {
            var start = new Date().getTime();
            var end = start;
            while (end < start + ms) {
                end = new Date().getTime();
            }
        }

---

但是只有第一种rgb颜色被授予荣誉？

在javascript中运行阻塞

循环是一个非常糟糕的主意。只有一个线程，因此如果您这样做，则在while循环完成之前，用户将无法与应用程序交互

更好的解决方案是使用
setTimeout
异步运行计时器，并在计时器完成时调用回调


var el=document.getElementById（'fondRGB'））
函数等待（ms、回调）{
设置超时（回调，毫秒）
}
等待（7000，函数（）{
el.style.backgroundColor=“rgb（0,0255）”
})
等待（14000，函数（）{
el.style.backgroundColor=“rgb（128128）”
})
等待（21000，函数（）{
el.style.backgroundColor=“rgb（0,0,0）”
})
在javascript中运行阻塞
，同时运行
循环是一个非常糟糕的主意。只有一个线程，因此如果您这样做，则在while循环完成之前，用户将无法与应用程序交互

更好的解决方案是使用
setTimeout
异步运行计时器，并在计时器完成时调用回调


var el=document.getElementById（'fondRGB'））
函数等待（ms、回调）{
设置超时（回调，毫秒）
}
等待（7000，函数（）{
el.style.backgroundColor=“rgb（0,0255）”
})
等待（14000，函数（）{
el.style.backgroundColor=“rgb（128128）”
})
等待（21000，函数（）{
el.style.backgroundColor=“rgb（0,0,0）”
})
因此，即使这样做有效，也不是您想要的，因为等待函数试图阻止唯一的执行线程，这只会使整个浏览器挂起。您正在寻找的wait方法被调用，它的工作原理与您可能习惯的稍有不同

setTimout允许您指定一个函数以及它执行该函数之前的毫秒数，因此在您的情况下，如果您希望每7秒更改一次背景色，您可能会执行以下操作：

var colors = ['rgb(0,0,255)', 'rgb(128,128,128)', 'rgb(0,0,0)'];
for (var i = 0; i < colors.length; i++) {
    setTimeout(function(color) {
        document.getElementById('fondRGB').style.backgroundColor = color;
    }.bind(null, colors[i]), i * 7000);
}

var colors=['rgb（0,0255）''rgb（128128）''rgb（0,0,0）'；
对于（变量i=0；i

抱歉，代码有点复杂，如果您想知道为什么需要.bind部分（如果您还不熟悉的话），请查找闭包。
因此，即使这样做有效，也不是您想要的，因为等待函数正试图阻止唯一的执行线程，这只会使整个浏览器挂起。您正在寻找的wait方法被调用，它的工作原理与您可能习惯的稍有不同

setTimout允许您指定一个函数以及它执行该函数之前的毫秒数，因此在您的情况下，如果您希望每7秒更改一次背景色，您可能会执行以下操作：

var colors = ['rgb(0,0,255)', 'rgb(128,128,128)', 'rgb(0,0,0)'];
for (var i = 0; i < colors.length; i++) {
    setTimeout(function(color) {
        document.getElementById('fondRGB').style.backgroundColor = color;
    }.bind(null, colors[i]), i * 7000);
}

var colors=['rgb（0,0255）''rgb（128128）''rgb（0,0,0）'；
对于（变量i=0；i

很抱歉代码有点复杂，如果您想知道为什么需要.bind部分（如果您还不熟悉），请查找闭包。
Aaah。。使用
setInterval
不要使用“不做任何事情”循环进行计时。改为使用setInterval（）（重复）或setTimeout（）（一次性）。Rayon和Marc B之所以说不使用wait（）函数而改为使用setTimeout（）或setInterval（），是因为这两种方法都是异步的，这意味着在运行时可以执行其他操作。但是，wait（）函数是完全同步的，在函数完成运行之前，它将阻止浏览器处理单击、击键、事件等。Javascript是单线程的，所以所有同步代码都是阻塞的。。使用
setInterval
不要使用“不做任何事情”循环进行计时。改为使用setInterval（）（重复）或setTimeout（）（一次性）。Rayon和Marc B之所以说不使用wait（）函数而改为使用setTimeout（）或setInterval（），是因为这两种方法都是异步的，这意味着在运行时可以执行其他操作。但是，wait（）函数是完全同步的，在函数完成运行之前，它将阻止浏览器处理单击、击键、事件等。Javascript是单线程的，所以所有同步代码都是阻塞的。