一連の色をJavaScriptで順番に表示

Question

私のASP.NET Webページ内に一連の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(); 
      } 
     } 

問題は、それが動作しないということです。私は試しました：

document.getElementById('fondRGB').style.backgroundColor = "rgb(0,0,255)"; 
wait(7000); 
document.getElementById('fondRGB').style.backgroundColor = "rgb(128,128,128)"; 
wait(7000); 
document.getElementById('fondRGB').style.backgroundColor = "rgb(0,0,0)"; 

しかし、最初のrgbカラーはこれまでに受け継がれていますか？

Answer 1

ブロッキングwhileループをjavascriptで実行することは、本当に悪い考えです。スレッドが1つしかないので、whileループが完了するまでユーザーはアプリケーションとやりとりすることができません。

より良い解決策は、setTimeoutを使用してタイマーを非同期で実行し、タイマーが完了したときにコールバックを呼び出すことです。

var el = document.getElementById('fondRGB') 
 

 
function wait(ms, callback) { 
 
    setTimeout(callback, ms) 
 
} 
 

 
wait(7000, function(){ 
 
    el.style.backgroundColor = "rgb(0,0,255)" 
 
}) 
 

 
wait(14000, function(){ 
 
    el.style.backgroundColor = "rgb(128,128,128)" 
 
}) 
 

 
wait(21000, function(){ 
 
    el.style.backgroundColor = "rgb(0,0,0)" 
 
})

Answer 2

ウェイト機能だけで全体のブラウザがハングアップするだろう唯一の実行スレッドをブロックしようとしているので、だから、それが動作しなかった場合でも、それはあなたが望むものではありません。あなたが探しているwaitメソッドはsetTimeoutと呼ばれ、これはおそらく使い慣れたものとは少し異なります。

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); 
} 

：

setTimoutを使用すると、背景色ごとに7秒を変更達成したい場合は、おそらくこのような何かをするだろうあなたのケースでので、それはその機能を実行することになる前に、機能とミリ秒単位の時間を指定することができます

残念ながら、コードが少し複雑になったのは、.bind部分がなぜ必要なのか疑問に思っている場合です（まだ慣れていない場合）。