1

JavaScript 関数の実行中に読み込み中の画像を表示する方法はありますか。私は約2〜5秒かかるものを持っています.jQuery-ajax関数のようなものがあればいいのですが

$("#loading").bind("ajaxStart", function(){
    $(this).attr("style", "visibility: visible")
}).bind("ajaxStop", function(){
    $(this).attr("style", "visibility: hidden")
});

明確化編集:

JavaScript 関数が実行されて引き継がれるたびに (たとえば 3/4 秒)、読み込み中の画像が表示されるという考え方です。実際には、この ajax 関数とは何の関係もありません。実行中の JavaScript を常にキャッチしてタイミングを取るという同じ原則です。

ありがとう！

4

1 に答える 1

12

じゃあ… あなたがコメントした後、それはすべてを変えます。

そのための実際のフックがないため、JavaScriptが実行されたときに自動的に表示することはできません。.trigger()ただし、独自のカスタム イベントを使用して使用することで、jquery カスタム イベントを活用でき.bind()ます。

function myFunctionThatDoesSomething() {
  $('body').trigger('Custom.BeginWork');

  // Do Something ...

  $('body').trigger('Custom.EndWork');
}

長時間実行される操作はおそらく非同期で実行する必要があるため、イベントでブロックされません。

$("#Something").click(function() {
   $('body').trigger('Custom.BeginWork');
   setTimeout(function() { DoWorkFunction(/* you can pass params here if you need */); }, 0); 
   // Causes it to be executed in the background 0ms from now
});

function DoWorkFunction() {
   // Stuff...

   $('body').trigger('Custom.EndWork');
}

次に、.bind()同じよう.ajaxStart()にイベントを登録します.ajaxStop()

$('#Working').bind('Custom.StartWork', function() {
  $(this).show();
});

$('#Working').bind('Custom.EndWork', function() {
  $(this).hide();
});

動作中の jsFiddle Exampleを次に示します。

アップデート：

jsFiddleでdoubleを実行しましたsetTimeout。ここ：

setTimeout(function() {
        // Call Operation Here
        try { setTimeout(function () { LongRunningOperation(10000);  }, 1000);
        }
        finally
        {
            $("body").trigger('Custom.End');
        }
    }, 50); // 50ms delay because some browsers *cough*IE*cough* are slow at rendering dom changes

これを翻訳すると、次のようになります。

ダイアグラム

したがって、Custom.Endイベントは、完了時ではなく、長時間実行される関数の実行をスケジュールした後に発生します。非同期でノンブロッキングですsetTimeout。

于 2012-06-05T22:26:34.940 に答える