基於響應的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的功能，在裝載機的初始淡入的回調，但所有你真的做的是延遲被顯示給用戶的數據，而這總是一件壞事。