基于响应的jquery延迟进程

Question

下面的代码可以正常工作，但是由于我不知道要花多长时间才能响应process.php。它总是不同的。没有一定的时间。

代码如下作品（除了故障延迟）是这样的：

1. 当我点击运行图标，运行图标应该会消失，装载机图标应该慢慢出现。
2. 响应从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的功能，在装载机的初始淡入的回调，但所有你真的做的是延迟被显示给用户的数据，而这总是一件坏事。