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>

Answer 1

是否符合您的提问？

$('#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);
      }
    });
  }
});

Answer 2

你做错了吗？这不是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有两个回调可用。

你也可以将Ajax函数放在加载器的初始fadeIn的回调中，但你所做的只是延迟向用户展示数据，而总是 a坏事。

基于响应的jquery延迟过程

2 个答案: