javascript - 如何确保 if 循环在按顺序运行下一个 if 循环之前等待并接收结果

Question

我有一个 javascript 函数，其中 if 循环不按顺序相互跟随。我需要他们一个接一个地运行。在第一个循环完成之前，第二个循环不应运行，因为它处理第一个循环的输出。

1. 我使用 if 循环(循环 1)来调用子 iframe 中的函数(该框架包含映射元素，我无法合理地将其与父框架组合)。这部分正在按预期工作。

2. iframe 中的函数被触发，它调用外部服务，并等待响应。当它收到响应时，它会使用“return”函数将“error”或“ok”传递回父函数。这部分正在按预期工作。

3. 父级接收响应，设置一个变量，然后继续执行下一个执行其他操作的 if 语句(循环 2)。

实际发生的情况是，循环 1 运行，然后循环 2 也运行，循环 2 在循环 1 之前返回结果 - 这把事情搞砸了，因为循环 2 应该处理循环 1 的结果。

jQuery(document).on('click', '.gv-button-delete', function (e) {
        e.preventDefault();  //prevent submission
        console.log('Intercepted delete button request');
        var delLoc = "";
        (function ($) {
            var delLoc2 = $('.gv-button-delete').attr("href"); //capture default action, because we need the time-valid nonce
            delLoc = delLoc2;
        }(jQuery));

        var objID = document.getElementById("input_4_40").value;
        objID = parseInt(objID);
        var iframe = document.getElementById("MapFrame1");
        var result = "";
        if (iframe) { //1st if loop that collects the answer
            var iframeContent = (iframe.contentWindow || iframe.contentDocument);
            var result = iframeContent.WriteLog(objID); //call the function from the iframe, and hopefully wait for a result. 
            console.log(result);
        }
        if (result == "error") { //the second if loop
            console.log("Step 5")
            console.log("There was an error with removing the feature");
        } else if (result == "ok") {
            console.log("Step 5")
            console.log("The spatial delete completed correctly");
        } else {
            console.log("Step 5")
            console.log("unexpected result of spatial delete")
        }

    });

iframe 代码，因为它对于上下文很有用。

function WriteLog(objID){
        var retireFeatureID = hotspots.getFeature(objID);
        var successStatus = "";
        retireFeatureID.feature.properties["SystemStatus"] = "Deleted";
        hotspots.updateFeature(retireFeatureID.feature, function (err, response) { //This is a syncronous call to another service
            if (err) {
                console.log("Step 3")
                console.log(err);
                successStatus = "error";
                console.log("successStatus is: " + successStatus);
            } else {
                console.log("Step 3")
                console.log(response);
                successStatus = "ok";
                console.log("successStatus is: " + successStatus);
            }

        });
        console.log("Step 4")
        console.log("Updated the status of feature: " + objID);
        console.log("child iframe has variable successStatus as: " + successStatus);
        return successStatus;
    }

实际发生的情况是控制台结果如下所示:

第 4 步

第5步

第3步

第二个循环在第一个循环完成并返回结果之前返回。

Answer 1

async-await 可能是您问题的答案。

这是它的工作原理。

您定义一个函数，该函数会延迟发送响应(可能是由于网络调用或其他原因)。

async function f() {
  // Make network call and return value
  return value;
}

然后你用await调用这个函数。

var valueRequired = await f();
if(valueRequired == something) {
   doSomeWork();
}

我希望这一点很清楚。

引用:MDN

请注意，这在旧版浏览器中不兼容，因为这是一个相当现代的 JS 构造。