Dialog ajax加载动画效果 - 需要循环延迟,睡眠

时间:2013-01-25 04:05:48

标签: javascript ajax caching sleep

我有一个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 ...});
     }

 });

1 个答案:

答案 0 :(得分:2)

尝试在触发请求之前添加一个标志,同时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回调。