11

私はこれに明確な答えが見つからないことに驚いています。 。フェードアウトアニメーションを開始しますが、それは1秒の持続時間で実行が終了する前に、要素をDOMから削除され、jQueryはどのように非同期関数を持っていますか?

$(someElements).fadeOut(1000); 
$(someElements).remove(); 

:だから、jQueryのでは、あなたがこれを行うことができますしかし、これはどのように可能ですか?私はJavaScriptがシングルスレッドであることを続けています(Is JavaScript guaranteed to be single-threaded?も参照してください)。私はどちらかを行うことができます知っている:

$(someElements).fadeOut(1000).promise().done(function() { 
    $(someElements).remove(); 
}); 

またはより良い:私は理解していない何

$(someElements).fadeOut(1000, function() { 
    $(this).remove(); 
}); 

は「シングルスレッド」にJavaScriptが実行される方法ですが、私はこれらのjQueryを使用することができますよ同時に異なる場所でDOMの変更を非同期的かつ視覚的に見る関数。どのように機能するのですか? この質問は「どうすればこの問題を解決できますか?」ではありません。

+2

短い答え:CSSアニメーションまたはタイマー。 –

+0

jQueryはアニメーションのキューを使用するため、ドキュメント内のどこかにあると思います。 – gpasci

答えて

5

jQueryアニメーション(ほとんどすべてのjavascriptベースのアニメーション)は、タイマーを使用してアニメーションを実行します。 .fadeOut()への呼び出しはアニメーションを開始するだけであり、一連のタイマー操作が完了してからしばらくするまで完了しません。

これはまだすべてシングルスレッドです。 .fadeOut()は、アニメーションの最初のステップを実行し、次のステップのタイマーを設定し、残りのjavascript(.remove()を含む)が完了するまで実行されます。そのジャバスクリプトスレッドが終了し、タイマーの時間が経過すると、タイマーが起動し、アニメーションの次のステップが実行されます。最後に、アニメーションのすべてのステップが完了すると、jQueryはアニメーションの完了関数を呼び出します。これは、アニメーションが完了したときに何かをすることを可能にするコールバックです。

あなたがこの問題を修正する方法である:

$(someElements).fadeOut(1000, function() { 
    $(this).remove(); 
}); 

あなたはアニメーションの完了機能を使用して唯一のアニメーションが実行されたときにアイテムを削除します。

+0

非同期実行が必要な場合は、強力なデータ処理を実行する場合はWebワーカーと考えるか、(現在)Experiment River Trail OpenCLブリッジを使用します。 – FlavorScape

+0

私は実際にJSTweenを好んでいます。 – FlavorScape

+1

@FlavorScape - WebワーカーはDOMとやりとりすることができないので、アニメーションにはあまり役に立ちません。 – jfriend00

1

jQueryには、登録されたすべてのアニメーションプロパティの変換を実行するsetIntervalハンドラがあります。あなたはAS3から来ている場合は、あなたがanimatefadeOutを変え、一定の時間を待つか、アニメーションのためのコールバックを使用するdelay()を使用したCAのenterFrameハンドラとして、またはOpenGL

+0

最近のバージョンのjQueryでは、requestAnimationFrameハンドラ(ブラウザが送出するイベント)を更新/描画関数として使用する可能性があります – FlavorScape

+0

requestAnimationFrameにはjQueryに出入りしています。それはしばらくの間、いくつかの問題のために引き出されました。私は現在、1.7のバージョンではソースが公開されていません。 – jfriend00

+0

@ jfriend00あなたは正しいhttp://stackoverflow.com/questions/7999680/why-doesnt-jquery-use-requestanimationframe – FlavorScape

0

でDrawメソッドと同じように考えます。 jQueryは、setTimeoutを使用してアニメーションとキューを作成します。

0

20年前にオペレーティングシステムがマルチタスキングを行ったのと同じように。スレッドはありませんでした。注意が必要なもののリストとリストに基づくものに注意を喚起するコントローラがありました。

サービスを必要とするすべてのものに対して、1つのスレッドだけが繰り返しリストを繰り返し処理します。ここでの唯一の違いは、待ち時間が関連付けられているものがあることです。それらはリストに含まれていますが、特定の期間が経過した後にのみサービスするように指定されています。本質的に非常に基本的なスケジューラの実装です。コンピュータ上のカーネルも同じことをします。あなたのCPUはいくつかのプログラムを同時に実行することができます。オペレーティングシステムのカーネルは、誰がミリ秒単位で注目を集めるかを決める必要があります(jiffies参照)。 Javascriptの「カーネル」やランタイムも同じことですが、基本的にはコアが1つしかないCPU上で実行されているようです。

これは、CPUが対応することができる、と私はJavascriptが任意のアナログを持ってわからないんだけど、簡単なレベルでは、私はそれが公正な表現だと思う割り込みキューと、そのようなのようなものについて話しません。

0

シングルスレッド化は、非同期プログラミングとは関係ありません。 http://social.msdn.microsoft.com/Forums/uk/csharplanguage/thread/3de8670c-49ca-400f-a1dc-ce3a3619357d

命令を実行できるスレッドが1つしかない場合、命令は実行されません。それらの空いている場所の間に、それはより多くの仕事の機会です。非同期プログラミングは、作業を再入可能なブロックに分割するだけで、スレッドは必要な場所にジャンプします。 (概念的な説明)

この場合、あなたの質問は、より適切である可能性があります。なぜこれがブロッキングコールではないのですか?その場合は、データアニメーションとUIアニメーションを分離するという答えがはっきりしています。 JS環境全体が1秒間ブロックしてはならず、データを取得または変換できる要素をアニメートしたり、他の要素のアニメーションをキューイングするなどの小さなスライスを取るべきです。

関連する問題