Question

我想要一个函数，该函数将按照他们在ExecuteINsequence函数中编写的顺序执行所有函数。我想要一个通用的ExecuteINsequence函数，该函数将传递应该依次执行的任何3个函数。

ExecuteINsequence(functionOne, [p1, p2], functionTwo, [p1, p2], functionThree, [p1, p2]);

function ExecuteINsequence(f1, f1_params, f2, f2_params, f3, f3_params) {
  f1.apply(this, f1_params);
  f2.apply(this, f2_params);
  f3.apply(this, f3_params);
}

function functionOne(p1, p2) {
  console.log("one");
  $.ajax({
      url: "www.url.com",
      type: "POST",
      cache: false,
      success: function(data) {
        functionFour()
      );
    }
  });
}

function functionTwo(p1, p2) {
  setTimeout(function() {
    console.log("two");
  }, 2000);

}

function functionThree(p1, p2) {
  setTimeout(function() {
    console.log("three");
  }, 1000);
}

function functionFour() {
  setTimeout(function() {
    console.log("four");
  }, 3000);

}

预期结果：
一个
四人
两个
三个
实际重用：
一个
三二四

Answer 1

发生这种情况的原因是，当您的函数正常运行时，它们会执行异步操作（ajax和set超时调用）。

所有功能都以正确的顺序启动，但是由于它们的计时 end 处于另一个顺序。如果将console.log作为函数的第一行添加（而不是像现在那样在onComplete中添加），则会看到它们以您期望的顺序开始。

对于ajax请求，这就是所谓的Promise。最后，它总是会做某事，但是您必须“连接”到它：

function functionOne(p1, p2) {
  console.log("one");
  return $.ajax({
      url: "www.url.com",
      type: "POST",
      cache: false,
      success: function(data) {
        functionFour()
      );
    }
  });
}

functionOne(1,2).then(functionTwo);

您可能还想查看async + await的组合。承诺和异步问题会很快变得复杂，因此我建议对这些主题进行更多研究以弄清楚事情。需要花费一些时间来理解它们。

Answer 2

回调是允许异步功能按顺序继续处理的功能。这适用于所有语言：c ++（lambda回调），Java（lambda回调和CompletionStage），go，Python等-不仅限于javascript。

要解决此问题，您需要执行以下操作：

ExecuteINsequence(functionOne, [p1, p2], functionTwo, [p1, p2], functionThree, [p1, p2]);

function ExecuteINsequence(f1, f1_params, f2, f2_params, f3, f3_params) {
  var self = this;

  f1.apply(this, f1_params,function(){
    // self is necessary in here because we are no
    // longer calling f2 in the context of ExecuteINsequence():
    f2.apply(self, f2_params,function(){
      // same reasoning for self:
      f3.apply(self, f3_params);
    });
  });
}

function functionOne(p1, p2, callback) {
  console.log("one");
  $.ajax({
      url: "www.url.com",
      type: "POST",
      cache: false,
      success: function(data) {
        functionFour(callback)
      );
    }
  });
}

function functionTwo(p1, p2,callback) {
  setTimeout(function() {
    console.log("two");
    if (typeof callback == 'function') {
      callback();
    }
  }, 2000);

}

function functionThree(p1, p2, callback) {
  setTimeout(function() {
    console.log("three");
    if (typeof callback == 'function') {
      callback();
    }
  }, 1000);
}

function functionFour(callback) {
  setTimeout(function() {
    console.log("four");
    if (typeof callback == 'function') {
      callback();
    }
  }, 3000);

}

或者，如果您使用诺言，则可以使用async / await：

ExecuteINsequence(functionOne, [p1, p2], functionTwo, [p1, p2], functionThree, [p1, p2]);

async function ExecuteINsequence(f1, f1_params, f2, f2_params, f3, f3_params) {
  await f1.apply(this, f1_params);
  await f2.apply(self, f2_params);
  await f3.apply(self, f3_params);
}

function functionOne(p1, p2) {
  console.log("one");
  return new Promise(function(resolve,reject) {
    $.ajax({
      url: "www.url.com",
      type: "POST",
      cache: false,
      success: function(data) {
        functionFour(resolve)
      )
    });
  });
}

function functionTwo(p1, p2) {
  return new Promise(function(resolve,reject){
    setTimeout(function() {
      console.log("two");
      resolve();
    }, 2000);
  });
}

function functionThree(p1, p2) {
  return new Promise(function(resolve,reject){
    setTimeout(function() {
      console.log("three");
      resolve();
    }, 1000);
  });
}

function functionFour(callback) {
  setTimeout(function() {
    console.log("four");
    if (typeof callback == 'function') {
      callback();
    }
  }, 3000);
}

您可能已经注意到，javascript世界中的所有异步函数要么接受回调，返回promise，要么具有某种怪异的非标准机制来传递诸如$.ajax() success属性之类的回调-为什么存在-允许您对函数调用进行排序。

依次执行所有JavaScript函数

2 个答案: