2016-12-03 13 views
3

だから、私は最近のものをしようとしてきたし、私のスクリプト内のコードのこの部分を得た:私はそれは私の体の背景を行う閉じた後にのみ 背景が変更される前に警告が表示されるのはなぜですか?

document.body.bgColor = "red"; 
alert("hello"); 

しかし、Chromeで

、警告ダイアログが最初にポップアップし、変更。 Firefoxでは、身体の背景が赤色に変わり、ポップアップが表示され、予想される動作が得られます。

アラートや類似のブラウザコントロールに頼らざるを得ないことは知っていますが、動作が標準でないためにこのようなことが起こった場合は誰でも教えてください。

答えて

4

レンダリングプロセスには独自のライフサイクルがあり、JavaScriptスレッドをブロックしません。彼らはどちらも独立して働く。

解決策は、JavaScriptの実行を「一時停止」して、レンダリングスレッドが追いつくようにすることです。これはbgColorDOM Level 2 Specで2003年から廃止されていることを0

document.body.style.backgroundColor = "red"; 

setTimeout(function() { 
    alert("hey"); 
}, 0) 

ノートに簡単なsetTimeoutセットを介して行うことができます。要素の背景色を設定する現在の方法は、element.style.backgroundColorです。

+0

ありがとうございます。それが助けになりました。 'setTimeout()'の中の 'alert()'が実行される前にレンダリングが保証されるならば、私にバグを起こすことがありますか?つまり、より複雑なCSSの場合、 'onStylesApplied'やレンダリングプロセスにフックできるものがあるのでしょうか? –

+1

'setTimeout'コールの前に、好きなだけ多くのスタイル操作を呼び出すことができます。 – marvinhagemeister

0

ダイアログをポップアップする前に、アラートを開く前に少し時間をおいて背景色を変更すると、ブラウザが再描画できるようになる可能性があります。

setTimeout(function() { alert("hello"); }, 1); 
0

最も簡単な回避策は次のようになります:

document.body.bgColor = "red"; 
setTimeout(function() { 
     window.alert('Hello There!'); 
    }, 10); 

タイムアウト値「9」は、私の場合は最小である私は< 9を使用している場合、警告が最初に表示されます。

関連する問題