Javascript 函数调用另一个函数而不等待完成

在我的方法feedContactCategorySelection中，我想等待

assignContactCategoryToLocal

调用完成，然后再继续运行其余的代码

feedContactCategorySelection();

function feedContactCategorySelection(){

  assignContactCategoryToLocal();

  var category = sessionStorage.getItem("category");

  category = JSON.parse(category);
  for (var i = 0; category["data"].length; i++) {
    //....
  }
}


function assignContactCategoryToLocal() {

  var category = sessionStorage.getItem("category");
  if (category == null) {
    $.ajax({
        url: 'http://localhost:8080/rest/contact/category',
        type: 'GET',
        success: function (json) {
            sessionStorage.setItem("category", JSON.stringify(json));
        }
    });
}

考虑在这种情况下使用

伪代码如下：

feedContactCategorySelection();

function feedContactCategorySelection(){

  assignContactCategoryToLocal().then(function(){
    var category = sessionStorage.getItem("category");

    category = JSON.parse(category);
    for (var i = 0; category["data"].length; i++) {
     ....
    }
  })

}

function assignContactCategoryToLocal() {
  return new Promise(function(resolve, reject){
    var category = sessionStorage.getItem("category");
  if (category == null) {
    $.ajax({
        url: 'http://localhost:8080/rest/contact/category',
        type: 'GET',
        success: function (json) {
            sessionStorage.setItem("category", JSON.stringify(json));
            resolve()
        }
        failed:{reject(reason)}
    });
  })    

}

考虑在这种情况下使用

伪代码如下：

feedContactCategorySelection();

function feedContactCategorySelection(){

  assignContactCategoryToLocal().then(function(){
    var category = sessionStorage.getItem("category");

    category = JSON.parse(category);
    for (var i = 0; category["data"].length; i++) {
     ....
    }
  })

}

function assignContactCategoryToLocal() {
  return new Promise(function(resolve, reject){
    var category = sessionStorage.getItem("category");
  if (category == null) {
    $.ajax({
        url: 'http://localhost:8080/rest/contact/category',
        type: 'GET',
        success: function (json) {
            sessionStorage.setItem("category", JSON.stringify(json));
            resolve()
        }
        failed:{reject(reason)}
    });
  })    

}

---

您可以将回调函数传递给

assignContactCategoryToLocal（）

，这样您就可以仅在ajax完成后继续运行代码。大概是这样的：

feedContactCategorySelection();

function feedContactCategorySelection() {
    // Do anything here before running the ajax
    // For instance, get category and pass it to the assignContact...
    var category = sessionStorage.getItem("category");
    ...
    assignContactCategoryToLocal(category, myCallbackFunction);
}

function myCallbackFunction(category) {
    category = JSON.parse(category);
    for (var i = 0; category["data"].length; i++) {
        ....
    }
}

function assignContactCategoryToLocal(category, callback) {

    if (category == null) {
      $.ajax({
          url: 'http://localhost:8080/rest/contact/category',
          type: 'GET',
          success: function (json) {
              sessionStorage.setItem("category", JSON.stringify(json));
              // Now that it is done and successful, run the rest...
              callback(category);
          }
      });
    }
}

例如，您可以获取一次类别，然后将其传递给函数，这可能有助于理解它们是如何连接的

编辑： 为了解决类别为

null

的问题，这里有一个修订版本

feedContactCategorySelection();

function feedContactCategorySelection() {
    // Do anything here before running the ajax
    // For instance, get category and pass it to the assignContact...
    var category = sessionStorage.getItem("category");
    ...

    // Move the if statement here so it checks the condition earlier.
    if (category === null) {
        assignContactCategoryToLocal(category, myCallbackFunction);
    } else {
        myCallbackFunction(category);
    }
}

function myCallbackFunction(category) {
    category = JSON.parse(category);
    for (var i = 0; category["data"].length; i++) {
        ....
    }
}

function assignContactCategoryToLocal(category, callback) {
    $.ajax({
      url: 'http://localhost:8080/rest/contact/category',
      type: 'GET',
      success: function (json) {
          sessionStorage.setItem("category", JSON.stringify(json));                           
          // Now that it is done and successful, run the rest...
          callback(category);
      }
    });
}

---

您可以将回调函数传递给

assignContactCategoryToLocal（）

，这样您就可以仅在ajax完成后继续运行代码。大概是这样的：

feedContactCategorySelection();

function feedContactCategorySelection() {
    // Do anything here before running the ajax
    // For instance, get category and pass it to the assignContact...
    var category = sessionStorage.getItem("category");
    ...
    assignContactCategoryToLocal(category, myCallbackFunction);
}

function myCallbackFunction(category) {
    category = JSON.parse(category);
    for (var i = 0; category["data"].length; i++) {
        ....
    }
}

function assignContactCategoryToLocal(category, callback) {

    if (category == null) {
      $.ajax({
          url: 'http://localhost:8080/rest/contact/category',
          type: 'GET',
          success: function (json) {
              sessionStorage.setItem("category", JSON.stringify(json));
              // Now that it is done and successful, run the rest...
              callback(category);
          }
      });
    }
}

例如，您可以获取一次类别，然后将其传递给函数，这可能有助于理解它们是如何连接的

编辑： 为了解决类别为

null

的问题，这里有一个修订版本

feedContactCategorySelection();

function feedContactCategorySelection() {
    // Do anything here before running the ajax
    // For instance, get category and pass it to the assignContact...
    var category = sessionStorage.getItem("category");
    ...

    // Move the if statement here so it checks the condition earlier.
    if (category === null) {
        assignContactCategoryToLocal(category, myCallbackFunction);
    } else {
        myCallbackFunction(category);
    }
}

function myCallbackFunction(category) {
    category = JSON.parse(category);
    for (var i = 0; category["data"].length; i++) {
        ....
    }
}

function assignContactCategoryToLocal(category, callback) {
    $.ajax({
      url: 'http://localhost:8080/rest/contact/category',
      type: 'GET',
      success: function (json) {
          sessionStorage.setItem("category", JSON.stringify(json));                           
          // Now that it is done and successful, run the rest...
          callback(category);
      }
    });
}

---

请检查我添加了

async:false，

以等待获得ajax响应

feedContactCategorySelection();

function feedContactCategorySelection(){

  assignContactCategoryToLocal();

  var category = sessionStorage.getItem("category");

  category = JSON.parse(category);
  for (var i = 0; category["data"].length; i++) {
    //....
  }
}


function assignContactCategoryToLocal() {

  var category = sessionStorage.getItem("category");
  if (category == null) {
    $.ajax({
        url: 'http://localhost:8080/rest/contact/category',
        type: 'GET', 
        async: false,
        success: function (json) {
            sessionStorage.setItem("category", JSON.stringify(json));
        }
    });
}

---

请检查我添加了

async:false，

以等待获得ajax响应

feedContactCategorySelection();

function feedContactCategorySelection(){

  assignContactCategoryToLocal();

  var category = sessionStorage.getItem("category");

  category = JSON.parse(category);
  for (var i = 0; category["data"].length; i++) {
    //....
  }
}


function assignContactCategoryToLocal() {

  var category = sessionStorage.getItem("category");
  if (category == null) {
    $.ajax({
        url: 'http://localhost:8080/rest/contact/category',
        type: 'GET', 
        async: false,
        success: function (json) {
            sessionStorage.setItem("category", JSON.stringify(json));
        }
    });
}

---

---

您可以使用

Promise

并在

oncompleted

handler@LiYinKong-如果您希望自己的代码在IE中工作，@围绕着从jQuery 1.5开始由

$.ajax（）

返回的jqXHR对象，使用

完成
和
失败
@LiYinKong实现Promise接口-这很公平，这个问题只标记了“javascript”，所以我假设OP想要一个纯javascript（即“框架不可知”）解决方案。我在问题中添加了一个“jquery”标记，因为OP的代码显然在使用jquery。如果我想调用多个函数，但在运行另一个函数之前等待所有函数都完成，这是一样的吗？目标是当用户登录以在会话存储中加载许多数据时，您可以使用
承诺
并在
完成后执行剩余的代码
handler@LiYinKong-如果希望代码在IE中运行，@aroth由
$.ajax（）返回的jqXHR对象，则不需要
从jQuery 1.5开始，用
完成
和
失败
@LiYinKong实现Promise接口-很公平，这个问题只标记了“javascript”，所以我认为OP需要一个纯javascript（即“框架不可知”）解决方案。我在问题中添加了一个“jquery”标记，因为OP的代码显然在使用jquery。如果我想调用多个函数，但在运行另一个函数之前等待所有函数都完成，这是一样的吗？目标是当用户登录以加载会话存储中的许多数据时，此代码有一个问题，如果feedContactCategorySelection中的category为null，则myCallbackFunction变量将具有相同的值。嗯，不完全是这样。如果类别为
null
，
myCallbackFunction
将永远不会运行。这是因为您已经设置了一个if语句，在运行ajax之前检查类别是否为
null
myCallbackFunction
在本例中，仅当类别不是
null且ajax成功时才会运行。试试看，让我们知道。对于更干净的代码，您可以将
if（category==null）
移动到
feedContactCategorySelection
。但是它应该像上面的代码一样工作。哦，你是对的，我忽略了你的if语句。如果类别为空，为什么要运行它？难道不是相反吗？也就是说，条件应该是
if（category！==null）..
现在的情况是，只有当类别为null时，ajax才会运行。我读取会话存储，如果没有找到，我会调用ajax将值存储在会话存储中我现在看到，当您从会话存储或通过ajax检索类别时，添加
else
可能会负责运行回调。请参阅已编辑的代码。此代码有一个问题，如果feedContactCategorySelection中的category为null，则myCallbackFunction变量将具有相同的值。嗯，不完全是这样。如果类别为
null
，
myCallbackFunction
将永远不会运行。这是因为您已经设置了一个if语句，在运行ajax之前检查类别是否为
null
myCallbackFunction
在本例中，仅当类别不是
null且ajax成功时才会运行。试试看，让我们知道。对于更干净的代码，您可以将
if（category==null）
移动到
feedContactCategorySelection
。但是它应该像上面的代码一样工作。哦，你是对的，我忽略了你的if语句。如果类别为空，为什么要运行它？难道不是相反吗？也就是说，条件应该是
if（category！==null）..
现在的情况是，只有当类别为null时，ajax才会运行。我读取会话存储，如果没有找到，我会调用ajax将值存储在会话存储中我现在看到，当您从会话存储或通过ajax检索类别时，添加
else
可能会负责运行回调。请参见编辑的代码。