Question

我有以下JavaScript模式。我试图在“getDataOne”完全完成后运行“getDataTwo”才能运行。这意味着XMLHttpRequest必须返回所有数据。我一直在四处寻找，我找到了信息。关于回调，超时和承诺。我不明白答案或解释不符合我的特定代码模式（我无法理解答案）。

当我这样做时： getDataOne（getDataTwo（））;

上面的结果不一致，因为XMLHttpRequest在下一次启动之前还没有启动。所以每个人都试图在彼此的顶端工作 - 或多或少。

当我尝试这样的事情时： this.getDataOne（function（）{ this.getDataTwo（）; }）; 这是一个微弱的回调尝试（我认为），只有一个功能可以运行。

所以 - 我的问题 - 只有当整个'processRequest'从'getDataOne'调用完成后，我才能可靠地运行'getDataTwo'？

请注意，我不想使用计时器式的功能（例如，仅在3秒后运行）。因为，谁能说出那条特定的字符串有多长。

这是代码模式：

this.getDataOne = function() {
    myURL = this.returnURL();
    var xrRW = new XMLHttpRequest();
    this.processRequest(apiGSS, xrRW, myURL);
} // end: getDataOne

this.getDataTwo = function() {
    myURL = this.returnURL();
    var xrRW = new XMLHttpRequest();
    this.processRequest(apiGSS, xrRW, myURL);
} // end: getDataTwo()

this.processRequest = function(iAPI, xReq, strCommand) {

    xReq.onreadystatechange = function() {
    if (xReq.readyState === 4) {
        if (xReq.status === 200) {

           // parse JSON data...
           Do JSON work here

           // write parsed data to screen...
           // by calling a function and sending it the parsed JSON data
           writeToScreen(arrayofJSONData());

           } // end: xReq.readyState === 200
        } // end: xReq.readyState === 4   
    } // end: onreadystatechange

    xReq.open("GET", strCommand, true);
    xReq.send(null);
} // end: processRequest

Answer 1

事实证明我的代码很不稳定。这是我的情况的修复（感谢回答的人，结果我没有足够的信息来帮助你了解我的全部情况。）

我现在成功使用这个调用模式：“getDataOne（getDataTwo（））;” （没有引号）。我在'getDataOne'和'getDataTwo'函数中做的不同之处在于我没有在单个数组中设置变量（我的原始代码中没有显示，抱歉）。因此，当调用getDataOne时，它正在写入getDataTwo依赖的同一个数组，而且，returnURL和processRequest正在检查相同的单个数组，以获取他们每个人必须做的事情。由于'最后一个更新阵列赢了'，整体代码将失败。这是我的代码现在正在做的更好的分享，并且做得很好，现在它没有尝试读取被竞争函数（yay）竞争的单个数组：

getDataOne(getDataTwo());

this.getDataOne = function() {
    myURL = this.returnURL("byOne type", "byOne query");
    this.processRequest(apiGSS, xrRW, myURL, "byOne Type");
} // end: getDataOne

this.getDataTwo = function() {
    myURL = this.returnURL("byTwo type", "byTwo query");
    this.processRequest(apiGSS, myURL "byTwo type");
} // end: getDataTwo()

this.returnURL( byType, byQuery ) {
    // return a URL that matches the byType and byQuery requirements
}

this.processRequest = function(iAPI, strCommand, byType) {

    var xReq = new XMLHttpRequest();

    xReq.onreadystatechange = function() {
      if (xReq.readyState === 4) {
        if (xReq.status === 200) {

          if (byType === "byTwo type") {
              // do this...
          } else {
              // do that...
          } // end: (byType === "byTwo type" )

        } // end: xReq.readyState === 200
      } // end: xReq.readyState === 4   
    } // end: onreadystatechange

    xReq.open("GET", strCommand, true);
    xReq.send(null);
} // end: processRequest

Answer 2

你非常接近，你只需要实际传递并调用回调：

this.getDataOne = function() {
    myURL = this.returnURL();
    var xrRW = new XMLHttpRequest();
    this.processRequest(apiGSS, xrRW, myURL, this.getDataTwo);
} // end: getDataOne

this.getDataTwo = function() {
    myURL = this.returnURL();
    var xrRW = new XMLHttpRequest();
    this.processRequest(apiGSS, xrRW, myURL);
} // end: getDataTwo()

this.processRequest = function(iAPI, xReq, strCommand, onSuccess) {

    xReq.onreadystatechange = function() {
      if (xReq.readyState === 4) {
        if (xReq.status === 200) {
          if(onSuccess) {
            onSuccess();
          }
        } // end: xReq.readyState === 200
      } // end: xReq.readyState === 4   
    } // end: onreadystatechange

    xReq.open("GET", strCommand, true);
    xReq.send(null);
} // end: processRequest

当然，为了进一步优化，我建议将XHR对象的创建移动到processRequest函数。

XMLHttpRequest：运行多个

2 个答案: