1

少し調べてみましたが、これに対する答えはまだ見つかりません。

ボタンをクリックすると情報がサーバーに送信され、現在の div が非表示になり、読み込み中の gif が読み込まれるという ajax リクエストがあります。サーバーが応答すると、gifのロードが取り除かれ、サーバーからのコンテンツが表示されるように設定しました。

コード：

$("#submit").click(function(e){
    e.preventDefault();
    var $domain = $.fn.HTTP($('#domain').val());
    if(!$.fn.ValidURL($domain)){
      $('#domainerror').fadeIn(500);
      return false;
    } 

    if($('#domainerror').css('display')!=='none'){
      $('#domainerror').fadeOut(350);
    }

    $('#question').hide(500, function(){
        $('#waiting').show(350);
    });

    $.getJSON('http://localhost/file.php',
    {
        i: $domain
    },
      function(data){
        $('#answer').html(data.message + $('#trybutton').html());
        $('#waiting').hide(350, function(){
          $('#answer').show(350);
        });
    });
});

問題は、jQuery がサーバーからの応答を受信するのが速すぎて、ロード中の gif が消えないことです。

ただし、サーバーに 3 秒間スリープするように指示すると、問題なく動作します。これは私が望む解決策ではありません。

何か案は？

4

4 に答える 4

3

ローディング アニメーションが非常に高速であるため、ユーザーがローディング アニメーションを見る必要がないのは確かに良いことですよね?!

とにかく、問題はアニメーションに少なくとも 500 ミリ秒かかっていることです。アニメーションは AJAX リクエストと同時に非同期で処理されます。おそらくCPUの浪費であるサーバーをスリープ状態にする代わりに、AJAXリクエストを送信する前にブラウザーを待機させます。

呼び出しを関数に入れるとsetTimeout()、この例では 3 秒間待機します。

setTimeout(function() {
    $.getJSON('http://localhost/file.php',
    {
        i: $domain
    },
    function(data){
        $('#answer').html(data.message + $('#trybutton').html());
        $('#waiting').hide(350, function(){
            $('#answer').show(350);
        });
    });
}, 3000);

ただし、理想的な解決策は、アニメーション効果を使用せず、show() と hide() のみを使用することです。

于 2012-07-03T22:25:38.290 に答える
2

待機中のアニメーションを表示する際の遅延を取り除き、リクエストが返されたときにまだ表示されないようにします。

 $('#question').hide() //was 500
 $('#waiting').show(); //was 350

すべてを合計すると、ほぼ 1 秒後になります。その時までに、ほとんどのシステムで ajax リクエストが返されている可能性があるため、その時点までにまだアニメーション化する価値はありません。

于 2012-07-03T22:26:00.413 に答える
0

質問の非表示が終了する前に ajax コールバックが実行され、$('#waiting').show(350);が後に続くよう$('#waiting').hide(350, ...)です。それを解決するには、次の 3 つの可能性があります。

すぐに (質問がフェードアウトするのを待たずに) imgを表示した場合、これは起こりません。答えは、#waiting が非表示になるのを待つ必要もありません。#waiting

または、変数を使用して、質問がフェードアウトしたときに回答が既にフェードインしていることを示し、アニメーションを表示しません。

var answered = false,
    waiting = false;
$('#question').hide(500, function(){
    if (!answered) {
        waiting = true;
        $('#waiting').show(350);
    }
});

$.getJSON('http://localhost/file.php', {
    i: $domain
}, function(data){
    $('#answer').html(data.message + $('#trybutton').html());
    answered = true;
    if (waiting) {
        $('#waiting').stop().hide(350, function(){
            $('#answer').show(350);
        });
    } else {
        $('#answer').show(350);
    }
});

4 つのアニメーションを常に連続して (少なくとも 1550 ミリ秒) 表示する場合は、手動でコーディングする必要があります。

var showanswer = false;
$('#question').hide(500, function() {
    $('#waiting').show(350, function() {
        if (showanswer) // already loaded
           showanswer(); // execute callback
        else
           showanswer = true; // mark as shown
    });
});

$.getJSON('http://localhost/file.php', {
    i: $domain
}, function(data){
    $('#answer').html(data.message + $('#trybutton').html());
    function animate() {
        $('#waiting').hide(350, function(){
            $('#answer').show(350);
        });
    }
    if (showanswer) // waiting image shown
        animate();
    else
        showanswer = animate; // set as callback
});
于 2012-07-03T22:26:37.463 に答える
0

Javascript のsetTimeoutを使用します。コードは次のようになります (正確ではないかもしれません)。

setTimeout("getResponse()", 3000);

function getResponse() {
    $.getJSON('http://localhost/file.php',
    {
        i: $domain
    },
      function(data){
        $('#answer').html(data.message + $('#trybutton').html());
        $('#waiting').hide(350, function(){
          $('#answer').show(350);
        });
    });
}

そうすれば、AJAX リクエストがi変数をサーバーに送信し、file.php のコードを処理し、処理可能なデータを送り返すことができます。唯一のトリックは、これを関数に入れ (必須ではありませんが、確かにsetTimeout関数の見栄えを良くします)、3000 ミリ秒後に呼び出すことです。

于 2012-07-03T22:27:00.567 に答える