loadingcssクラスがアニメーションGIF画像（クラシックスピナー）を含むdivにアタッチされていると仮定します。
$( document ).ready(function(){
$(".button").click(function(event){
$(".loading").show();
// time-consuming code running in the browser
$(".loading").hide();
return false;
});
});
クライアントがサーバーにajaxリクエストを実行している間、スピナーイメージが回転するのを見るのに慣れており、ajaxリクエストのコールバックが戻るまでスピナーをアニメーション化できるJavaScriptエンジンに制御を任せています。
ただし、上記の例では、ajaxは含まれず、「時間のかかるコード」はクライアント側にあります。つまり、JavaScriptエンジンは、クライアントでコストのかかるジョブを実行している間、gifをアニメーション化できません。
JavaScriptには（ネイティブ）スレッドがないことを知っていますが、JavaScriptコードの実行中にそのスピナーを表示して回転させるにはどうすればよいですか？
状況があなたの言うとおりである場合、これはWebワーカーを使用することが理にかなっているまれなシナリオになります。おそらく、フリーズしたGIFを表示するか、タイムアウトに基づいて部分的な作業を試み、JavaScript呼び出しスタックをときどき完了させて、UIの更新を実行できるようにする、フォールバックを提供する方法で実装する必要があります。
IE10以降、およびその他のほとんどすべてと互換性があります：https：//developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
あなたにアイデアを与えるためのタイムアウトステップのランダムで不完全な例：
function doPartialWork() {
//// do one "step" of the complex logic.
// If complete, run a callback (and terminate without starting the timer)
if (complete) {
runCallback();
}
else {
// Start another slice of work on the next processing cycle
setTimeout(doPartialWork, 1);
}
}
Google社員：上記のリンクが壊れている場合は、「Webワーカー」でリソースを検索してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加