javascript - 応答に基づくjquery遅延プロセス

Question

以下のコードは機能しますが、 process.phpが応答するのにどれくらいの時間がかかるかわからないため、正しく機能しないのはプロセスの遅延です。それは常に異なります。時間がない。

以下のコードは（誤った遅延を除いて）次のように機能します：

実行アイコンをクリックすると、実行アイコンが消え、ローダーアイコンがゆっくり表示されます。
process.phpからの応答後、ローダーアイコンはゆっくりと消え、成功/失敗アイコンはゆっくりと表示されます。次の直後（div ）は、成功した場合はゆっくりと表示されます。

ありがとう

$(document).ready(function()
{
   $("#run").click(function(event)
   {
      $('#run').hide();
      $('#loader').fadeIn(1000).delay(1000);

      $.ajax(
      {
         type       : 'POST',
         url        : 'process.php',
         data       : 'user=jolly',
         dataType   : 'json',
         success    : function(response)
         {
            if(response.status == 'success')
            {
               $('#loader').delay(1000).fadeOut();
               $('#success').delay(4000).fadeIn(1000);
               $('#next').delay(4500).fadeIn(1000);
            }
            else
            {
               $('#loader').delay(1000).fadeOut();
               $('#fail').delay(4000).fadeIn(1000);
               $('#next').delay(4500).fadeIn(1000);
            }
         }
      });
   });
});


<div id="first">
   <img id="run" src="run.png" />
   <img id="loader" src="loader.png" style="display:none;" />
   <img id="success" src="success.png" style="display:none;" />
   <img id="fail" src="fail.png" style="display:none;" />
</div>
<div id="next" style="display:none;">
   ....
   ....
</div>

score 2 · Accepted Answer

それはあなたの質問と一致しますか？

$('#run').hide();
$('#loader').fadeIn(1000);

$.ajax({
  type: 'POST',
  url: 'process.php',
  data: 'user=jolly',
  dataType: 'json',
  success: function (response) {
    $('#loader').stop(true).fadeOut(function () {
      if (response.status == 'success') {
        $('#success').fadeIn(1000, function () {
          $('#next').fadeIn(1000);
        });
      } else {
        $('#fail').fadeIn(1000);
      }
    });
  }
});

score 2 · Accepted Answer

あなたはそれを間違っていますか？これはdelay()意図されたものではありません。この動作を処理するためのコールバックがあります。

$(function() {
    $("#run").on('click', function() {
        $(this).hide();
        $('#loader').fadeIn(1000);

        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: {user: 'jolly'},
            dataType: 'json'
        }).done(function(data) {
            $('#loader').fadeOut(1000, function() {
                $('#success').fadeIn(1000, function() {
                    $('#next').fadeIn(1000);
                });
            });
        }).fail(function() {
            $('#loader').fadeOut(1000, function() {
                $('#success').fadeIn(1000, function() {
                    $('#fail').fadeIn(1000);
                });
            });
        });
    });
});

また、チェックする必要はありませんresponse.status。jQueryには両方で使用可能なコールバックがあります。

ローダーの最初のfadeInのコールバックにAjax関数を配置することもできますが、実際に行っているのは、データがユーザーに表示されるのを遅らせることだけであり、それは常に悪いことです。

javascript - 応答に基づくjquery遅延プロセス

2 に答える 2

Related

Reference