2013-01-16 7 views
5

だが、私はこのjavascript関数があるとしましょう失速します。上記のjavascript関数を実行すると、関数が実行されている間にスピンナーが停止します。 私が何を言おうとしているのを見てくださいhereを参照してください。基本的に、JavaScriptはCSSのアニメーションを停止し、私はなぜ、または誰かがこれに気づいている/回避策が見つかりました。私はsetTimeout(fn、0)に入れてみましたが、ここでfnは長いプロセスですが、なぜそれも動作しません(jsはマルチスレッドではありません)。誰もがこれを見た?CSSアニメーションはJavaScript関数を実行するときに

更新:興味深いことに、ブラウザインターフェイスとのやりとりはまだ影響を受けていますが、これはSafariの問題ではないようです。

+0

"長時間実行しているコード"を塊に分割して、他のすべてを続行する必要があります。 –

+0

そうですね、これで修正できることは承知していますが、これを適用しようとしている関数の実行可能な解決策ではありません。関数は、小さな塊に分割できません。私は実際に誰かが上記の正確な問題に対する解決策を持っているかどうかをチェックしています。これは同様に、分割できません。 –

答えて

5

ブラウザページはシングルスレッドです。 UIの更新は、あなたのjavascriptプログラムと同じスレッドで行われます。これはまた、JavaScriptコードが実行されている間にアニメーションが新しいフレームを描画しないことを意味します。通常、ほとんどのJSコードは単一のアニメーションフレームよりも速く、高速に実行されるため、これは大きな問題ではありません。

最高のアドバイスはこれだけです:それをしないでください。その間JSエンジンをロックしないでください。それを行うためのよりクリーンな方法を見つけ出す。


ただし、必要な場合は方法があります。 HTML5's Web Workers APIで追加のスレッドを取得できます。これは古いブラウザではサポートされていませんが、主なWebページや独自のスレッドから長時間実行されているCPUコードを実行して、完了したら結果をページに戻すことができます。

+0

はい、私はWebワーカーを見ました。 WebワーカーがDOMにアクセスできるかどうか知っていますか?私の長期的なプロセスはjQueryで起こっているすべてのDOM更新であり、それは遅いです。 –

+0

@ChristianBankester WebワーカーはDOMにアクセスできません。 'setTimeout'を使わなければなりません。 – bfavaretto

+0

ああ、私は動作しなかったsetTimeoutの使用を試みました。この更新されたjsfiddleを参照してください:http://jsfiddle.net/JU4St/2/ –

関連する問題