-1

私はajaxloaderを表示し、このようにajaxsetupに非表示にします

beforeSend:function(xhr, settings){
$('.loader').show();

 complete:function(){
         $('.loader').hide();

これで、リクエストは非常に高速に発生し、アニメーションは1秒未満しか読み込まれません。

アニメーションが3秒間そこにとどまり、その後divが更新されるように遅延を設定する方法はありますか？

つまり、基本的にajax呼び出しを遅らせるのは、アニメーションを遅らせるだけではありません。なぜなら、ajaxリクエストが完了し、アニメーションがまだそこにあることを知らないからです。

4

3 に答える 3

1

クライアントでのローダーの非表示を遅らせるか、サーバーをスリープ状態にすることができます。

JavaScriptの場合：

setTimeout(function(){ $('.loader').hide() }, 3000)

または、結果をエコーアウトする前にPHPで：

sleep(3)

PHPを想定していますが、他の言語でも同じ機能を使用している場合は、名前が異なる可能性があります。応答にかかる時間に加えて、3秒間の睡眠が必要になることに注意してください。

編集：リクエスト全体を遅らせたい場合は、これを試してください：

function request(delay) {
  // beforeSend logic here
  $('.loader').show();
  setTimeout(function(){
    $.ajax({
      ...
      complete: function() { $('.loader').hide(); }
      ...
    });
  }, delay);
}

request(delay)その後、必要なときにいつでも電話してください。

于 2012-10-11T03:41:15.703 に答える
1

あなたが何をしようとしているのかがはっきりとはわからないので、次のような解決策を次に示します。

  1. 変更できるのはjQueryajaxインフラストラクチャのみです。ajaxのすべての呼び出し元を変更することはできないため、呼び出し元のコードを変更せずにajax関数内から何かを実行しようとしています。
  2. ajax呼び出しが開始されたら、すぐに進行状況を表示しますが、ajaxリクエストの送信を1.5秒間遅らせます。
  3. ajax呼び出しが完了したら、進行状況を非表示にします。

コードは次のとおりです。

// save old function
$.ajaxOld = $.ajax;

// install our global status hide handler
$.ajaxSetup({
    complete: function() {
        $('.loader').hide();
    }
});

// replace ajax call with our own that adds the delay
$.ajax = function() {
    // save state from the original function call for use later
    var args = [].slice.call(arguments);
    var self = this;

    // show progress immediately
    $('.loader').show();

    // call the original ajax function in 1.5 seconds
    setTimeout(function() {
        $.ajaxOld.apply(self, args);
    }, 1500)
}

警告-これは、への呼び出し$.ajax()がjqXHRオブジェクトを返すことを期待しておらず、ajaxdeferredsが使用されていない限り機能します。これらを使用する場合は、成功ハンドラーと完了ハンドラーを保留する、より複雑なソリューションをコーディングする必要があります。

編集：これらは、質問が何であったかを理解するための古い試みです：

通知が最小限の時間画面に表示されるようにするには、次のようにします。

beforeSend:function(xhr, settings){
    xhr.startTime = new Date().getTime();
    $('.loader').show();

complete:function(xhr){
    var elapsed = new Date().getTime() - xhr.startTime;
    if (elapsed < 3000) {
        $('.loader').delay(3000 - elapsed).hide(1);
    } else {
        $('.loader').hide();
    }

これにより、メッセージが画面に表示されていた時間を追跡し、ajax呼び出しがすぐに行われた場合、3秒が経過するまでメッセージの非表示を遅らせます。ajax呼び出しがすぐに行われず、メッセージがすでに十分に長く表示されている場合は、ajax呼び出しが完了するとメッセージが非表示になります。

コンテンツの読み込みを遅らせることで、completeハンドラーで結果を処理している場合は、次のように行うことができます。

function finishMyAjax(xhr) {
    // load your ajax content
    $('.loader').hide();
}

    beforeSend:function(xhr, settings){
        xhr.startTime = new Date().getTime();
        $('.loader').show();

    complete:function(xhr){
        var elapsed = new Date().getTime() - xhr.startTime;
        var self = this;
        var args = [].slice.call(arguments);
        if (elapsed < 3000) {
            setTimeout(function() {
                finishMyAjax.apply(self, args);
            }, 3000-elapsed);
        } else {
            finishMyAjax.apply(this, arguments);
        }

ajaxの結果をすべて完全なハンドラーで処理していない場合は、結果を処理するためのコードを含めてください。そうすれば、このアイデアに含めることができます。ここでの一般的な考え方は、ajax呼び出しが開始する時間を記録することです。ajax応答が来たときに、それが3秒未満である場合、3秒の残り時間のタイマーを設定し、タイマーコールバックで応答を終了します。3秒以上経過している場合は、先に進んで結果を通常どおり処理します。

これにより、必要以上の時間を使用することはありませんが、常に少なくとも3秒は使用できます。ajax呼び出しの起動を3秒間遅らせることもできますが、ajax呼び出しで結果が得られるまでに6秒かかる場合、プロセス全体で9秒かかりますが、これは希望どおりではありません。私のスキームでは、ajaxの結果に1秒かかる場合、処理を3秒まで遅らせます。ajaxの結果に6秒かかる場合、結果はすぐに処理されます（3秒の遅延はありません）。

于 2012-10-11T03:45:31.887 に答える
0

ajaxリクエストの処理中にajaxローダーを表示するための最良の方法

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function loadXMLDoc() {
    document.getElementById("loader").style.display="inline";
    var xmlhttp;
    if (window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();
      }
    else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        document.getElementById("loader").style.display="none";
        }
      }
    xmlhttp.open("GET","yourRequestController",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <div  id="loader" style="display:none">
    you are seeing this MSG becoz our ajax loader is processing ,
    it will automatically hide when your ajax request is completed
 // place your ajax loader imagae rather than showing a msg
    </div>
    <div id="myDiv">Content Before</div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

    </body>
    </html>

そのw3schools.comajaxの例、ajaxローダーを表示するようにコードを変更しました

于 2013-08-05T09:32:21.217 に答える