阻止屏幕不适用于多个 AJAX 调用答案

【问题标题】：Block Screen does not work with multiple AJAX calls阻止屏幕不适用于多个 AJAX 调用
【发布时间】：2015-08-26 06:57:47
【问题描述】：

我有一个名为“提交评估”的按钮。我正在尝试使用 ajax 调用保存图像，并取决于结果将执行另一个 ajax 调用以便将数据发布到服务器。编码结构如下

JS 代码：

var isPostedImage=false;
Submit Click function
{
   //call to screen lock function
   PostAssessmentData();
}

function PostAssessmentData()
{
   isPostedImage=PostImage();
   if (isPostedImage)
   {
      //AJAX call to post data to server
      async:false;
   }
}

PostImage=function()
{
  //AJAX call to save Image in server
  async:false;
  //if it is successful 
  isPostedImage=true;
}

我的问题是我首先要求锁定屏幕功能。但是在执行上述 ajax 调用之前，屏幕不会锁定。我也做了那些 async :false 。我认为延迟对象是一个很好的概念。但我不知道在这种情况下如何使用延迟对象概念。

谁能帮帮我。

提前致谢

【问题讨论】：

你是说PostAssessmentData ()里面的ajax调用在Postimage()里面的ajax调用之前执行好了吗？

标签： jquery jquery-deferred jquery-blockui

【解决方案1】：

冻结屏幕直到链式 ajax 调用完成是这样完成的

我做了什么：

在进行 ajax 调用之前，在屏幕上显示像微调器一样的加载器图像。
第二个 ajax 调用会在第一个 ajax 调用的成功回调中执行，从而将第一个调用收到的响应发送到第二个调用。
所有调用完成后，从屏幕上隐藏微调器，允许用户与屏幕进行交互。

JS 代码：

$('#loading').hide();

function p1() {
   return $.post("/echo/html/", {
    html: "Happy"
    });
}

function p2(firstCallData) {
    var newData = firstCallData + " Coding :)";
    return $.post("/echo/html/", {
       html: newData
    });
}

function clickHandler() {
    $('#loading').show();
    $.when(p1()).then(function (firstCallResults) {
        console.log(firstCallResults);
        $.when(p2(firstCallResults)).then(function (secondCallResults)     {
             console.log(secondCallResults);
             alert("All ajax calls processed.\n" + secondCallResults);
             $('#loading').hide();
        });
    });
}

$(function () {
   $("#go").click(clickHandler);
});

Live Demo @ JSFiddle

注意：以上解决方案是基于一个通用的想法，因此该解决方案不应被视为最终解决方案

【讨论】：