Dialog ajax加載動畫效果 - 需要循環延遲，睡眠

Question

我有一個jquery ui對話框，它是一個從服務器加載部分視圖的ajax。 該對話框最初作為dialog-ajax-loader打開，當調用返回時，它會動畫/增長到內容的大小。

問題是當對話框內容被緩存或者ajax調用太快時，我得到了一個不良影響，其中內容基本上被加載到ajax-loader大小的對話框中，而ajax加載器實際上是不可見的。 毋庸置疑，通過我所做的所有工作使這看起來很神奇，我無法滿足於此。 我需要ajax加載器最少顯示1秒，如果ajax調用實際需要更多，則需要更多。

我在網上搜索了很長一段時間，試圖找到一個很好的sleep（）函數，但總是有一個禁忌。 想在這里發帖以獲得一些想法，這是最好的方法。

實際的代碼當然要復雜得多，但概念上如下：

 var mydialog = $("<div></div>").dialog({...Ajax loader settings...});

 var minimumTimeMet = false;
 setTimeout(function( ){ minimumTimeMet = true; }, 1000);
 mydialog.dialog("open"); //Open ajax loader

 $.ajax({ 
     cache: false,   //This helps but not always, sometimes the request is just too fast
     ....
     success: function(htmlContentResponse){

          while(!minimumTimeMet){
              //sleep here! However, thread cannot be 
              //blocked because the function set in setTimeout
              //above must executed to change minimumTimeMet = true 
              //and break out of this loop. 
          }

          mydialog.html(htmlContentResponse);  
          mydialog.animate({...Animate into new dialog settings ...});
     }

 });

Answer 1

嘗試在觸發請求之前添加一個標志，同時setTimeout為1000ms並清除回調中的標志

var flag = false;
var response;

setTimeout(function () {
    flag = true;
    if (response) {
        ajaxCallback(response);
    }
}, 1000);

$.ajax({
    cache: false,
    success: function(htmlContentResponse){
        response = htmlContentResponse;
        if (flag)   {
            ajaxCallback(response);
        }
    }
});

function ajaxCallback(htmlContentResponse) {
    // Do something
}

這樣，如果ajax調用提前完成，它將等待直到執行setTimeout回調。