对话框 ajax 加载动画效果 - 需要循环延迟、睡眠

Dialog ajax loading animation effect - need loop delay, sleep

本文关键字：循环 延迟 睡眠 加载 ajax 动画 对话框      更新时间：2023-09-26

我有一个jquery u界面，它加载了来自服务器的部分视图。对话框最初作为对话框 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 ...});
     }
 });

尝试在触发请求之前添加一个标志，同时将超时设置为 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 回调执行。

相关文章：