在 Javascript 中，我怎样才能停止触发任何进一步的迭代，直到满足条件

Question

过去 2 周我一直在努力解决以下问题，但一无所获，希望有人能指出正确的方向；

我有一个使用 JS 和 jQuery 以及 xml 逻辑条件和操作的单页应用程序。

使用 JS 允许函数异步运行很好，但我需要解决一个问题；

当用户点击一个元素时，js 会遍历 xml 并找到与元素 ID 相关的节点，检查是否满足条件集并触发相关操作。下面显示了 XML i 的一个片段；

 <block id="10000005" triggerID="125">
  <ConditionsAndActions name="Default" setIndex="0">
   <Conditions>
   </Conditions>
   <Actions>
    <Action actionIndex="0" type="AskForConfirmation" message="Are you sure?"/>
    <Action actionIndex="0" type="NewRecord" />
   </Actions>
  </ConditionsAndActions>
 </block>

以上表示点击'#btn125'时触发AskForConfirmation函数，然后如果用户点击确认按钮，处理手动记录功能。

动作由一个循环遍历，我需要为 AskForConfirmation 停止循环继续，直到用户完成确认，或者如果用户给出否定响应或 30 秒的时间流逝，则循环被放弃。

我尝试过 setTimeout 使用变量来控制触发下一个动作，但没有成功，我无法理解 async/await 如果可行，请指导我如何操作。

我在下面包含了动作触发循环；

 function triggerActions(callType, tags, iC1, iC2, iC3, iC4) {
    for (var iA1 = 0; iA1 < tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes.length; iA1++) {
        if (tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].nodeName === "Actions") {
            for (var iA2 = 0; iA2 < tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes.length; iA2++) {
                if ($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("type") !== null) {
                    switch ($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("type")) {
                        case "ChangeVisibility":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : ' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("element") + ' visibility amended.');
                            }
                            eval('$("#' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("element") + '").' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].chidNodes[iA1].childNodes[iA2]).attr("effect") + '();');
                            break;
                        case "commentBox":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Comment box for ' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("name") + ' found in configuration');
                                loggingAction('log','comment log');
                            }
                            break;
                        case "DisplayAlert":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Lightbox stating: ' + variableConversion(($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("message"))) + ' output');
                            }
                            var alertMessage = '<h2 class="text-center">ALERT:</h2><p class="text-center">' + variableConversion(($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("message"))) + '</p>';
                            $.colorbox({
                                html: alertMessage
                            });
                            $('#cboxContent').removeClass('errorMessage');
                            break;
                        case "DataQuery":
                            if (debugMode && (($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("destination")).length !== 0)) {
                                destination = '{{' + ($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("destination")) + '}}';
                                loggingAction('log','NOTIFICATION : Data Query initiated with destination = "' + destination + '", destinationControl = "' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("destinationControl") + '",query number = "' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("queryNumber") + '", parameters ="' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("parameters") + ' " and values = "' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("values") + '".');
                            }
                            getRunQuery($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("destination"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("destinationControl"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("parameters"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("queryNumber"), sessionID);
                            break;
                        case "DataSource":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Data Source Action');
                            }
                            break;
                        case "DispositionCall":
                            sendDisposition($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("outcome"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("callbackNumber"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("callbackNumberControl"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("callbackTime"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("callbackTimeControl"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("personalCallback"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("returnData"));
                            break;
                        case "GetRecord":
                            var URN = ($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2])).attr("URN");
                            if (gridValueSelected.length > 0) {
                                URN = gridValueSelected;
                            }
                            if (debugMode) {
                                loggingAction('info','INFORMATION : Get Record request initiated with URN return of "' + URN + '".');
                            }
                            rid = generateRID(), message = 'type: "GetRecord", RID: ' + rid + ', SID: ' + sessionID + ', URN:"' + URN + '"';
                            activeRequests.push(rid + ':GetRecord');
                            socket.send(message);
                            if (debugMode) {
                                loggingAction('info','INFORMATION : Get Record message sent to server  "' + message + '".');
                            }
                            break;
                        case "GoAvailable":
                            if (debugMode) {
                                if (debugMode) { loggingAction('log','NOTIFICATION : Setting Agent status to Available.'); }
                                rid = generateRID(), message = 'type:"GoAvailable",RID:' + rid + ',SID:' + sessionID;
                                serverComms("outbound", message, rid, "GoAvailable");
                                if (debugMode) { loggingAction('log','NOTIFICATION : Message sent to server - "' + message + '".'); }
                            }
                            break;
                        case "HangUp":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Hang up call requested.');
                            }
                            $.colorbox({
                                html: '<h2 class="confirmation text-center">Confirmation:</h2><p class="confirmation text-center">Call hung up.</p>'
                            });
                            $('#cboxContent').removeClass('errorMessage');
                            break;
                        case "LogOut":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Agent has requested to Log out of script.');
                            }
                            logOut();
                            break;
                        case "MoveToPanel":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Action to Move to Panel #pnl' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("panelID") + ' triggered.');
                            }
                            var parser = new DOMParser(),
                                xmlLogic = parser.parseFromString(scriptXML, "text/xml"),
                                tags = xmlLogic.getElementsByTagName('*');
                            $(document).ready(function () {
                                for (var i0 = 1; i0 < tags.length; i0++) {
                                    switch (tags[i0].nodeName) {
                                        case "Button":
                                            updateVariableOutput('#' + $(tags[i0]).attr("id"), $(tags[i0]).attr("name"));
                                            break;
                                        case "inputField":
                                            updateVariableOutput('#' + $(tags[i0]).attr("id"), $(tags[i0]).attr("label"));
                                            break;
                                        case "textBlock":
                                            updateVariableOutput('#' + $(tags[i0]).attr("id"), $(tags[i0]).attr("text"));
                                            break;
                                    }
                                }
                            });
                            eval('$("#pnl' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("panelID") + '").parent().children().hide(); $("#pnl' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("panelID") + '").show();');
                            gridValueSelected = '';
                            $('.selectedRow').removeClass('selectedRow');
                            $('table').children().remove();
                            $('table').removeClass('jsgrid');
                            break;
                        case "MoveToScriptWindow":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION :Action to Move to Window "#win' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("panelID") + '" has been triggered.');
                            }
                            eval('$("#win' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("panelID") + '").parent().children().hide(); $("#win' + $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("panelID") + '").show();');
                            gridValueSelected = '';
                            $('.selectedRow').removeClass('selectedRow');
                            $('table').children().remove();
                            $('table').removeClass('jsgrid');
                            break;
                        case "OpenBrowserWindow":
                            openNewWindow($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("URL"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("toolbar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("addressBar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("toolbar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("addressBar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("toolbar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("addressBar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("toolbar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("addressBar"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("width"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("height"));
                            if (debugMode) {
                                loggingAction('log','INFORMATION : "' + variableConversion($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("URL")) + '" opened in new window.');
                            }
                            break;
                        case "SetFieldParameter":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Field Parameter Set');
                            }
                            break;
                        case "SetTextBox":
                            if (debugMode) {
                                loggingAction('log','NOTIFICATION : Set Text Box Action');
                            }
                            break;
                        case "SetVariable":
                            if (gridValueSelected !== '') {
                                var variableName = $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("variable")
                                if (debugMode) {
                                    loggingAction('log','NOTIFICATION : The variable to have selected grid value associated with it is "' + variableName + '".');
                                }
                                variableNameSplit = variableName.split('.');
                                if (debugMode) {
                                    loggingAction('info','INFORMATION : The Object to recieve the variable is "' + variableNameSplit[1] + '".');
                                    loggingAction('info','INFORMATION : The key for the variable is "' + variableNameSplit[1] + '".');
                                }
                                if ((variableNameSplit[0] === 'Script') || (variableNameSplit[0] === 'SCRIPT')) {
                                    addScriptVariable(variableNameSplit[1], gridValueSelected);
                                }
                            } else {
                                loggingAction('log','NOTIFICATION : Set Variable Value function initiated.');
                                if ($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("value") !== '') {
                                    var variableName = $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("variable"),
                                        variableValue = variableConversion($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("value"));
                                    if (debugMode) {
                                        loggingAction('log','NOTIFICATION : ' + variableName + ' set to "' + variableValue + '".');
                                    }
                                    eval(variableName + '="' + variableValue + '"');
                                } else if ($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("controlID") !== '') {
                                    var variableName = $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("variable"),
                                        variableValue = $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("controlID");
                                    variableValue = eval('$("#txt' + variableValue + '").val()');
                                    if (debugMode) {
                                        loggingAction('log',' NOTIFICATION : The value of the variable to be passed to ' + variableName + ' is "' + variableValue + '".');
                                    }
                                    eval(variableName + '="' + variableValue + '"');
                                }
                            }
                            break;
                        case "UpdateWebFrame":
                            if (debugMode) {
                                loggingAction('info','INFORMATION : iFrame update initiated to load ' + variableConversion($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("URL")) + '.')
                            }
                            updateIFrame($(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("URL"), $(tags[0].childNodes[iC1].childNodes[iC2].childNodes[iC3].childNodes[iA1].childNodes[iA2]).attr("destinationControl"));
                            break;
                    }
                }
            }
        }
    }
}

下面是我希望实现的目标的简化示例；

JS;

var blocker = 'no';

function askForConfirmation() {
    $('#Interaction').fadeIn();
}
function manualRecord() {
console.log('Request new record')}
function responseReceived(acknowledgemntValue){
    $('#Interaction').fadeOut();
}
$(document).ready(function(){
    $('#btn69').click(function(){
        askForConfirmation();    
    });
    $('#accept').click(function(){
        blocker = 'no';
        responseReceived();
        alert(blocker);
    });
    $('#decline').click(function(){
        blocker = 'yes';
        responseReceived();
        alert(blocker);
    });
});

html;

<!DOCTYPE html>
<head>
<title>Sandbox</title>
</head>
<body>
    <header>
        <h2>Sandbox testing</h2>
    </header>
    <main>
        <button id="btn69">Request Manual Record</button>
        <div id="Interaction" style="display:none;">
        <p>Please confirm you wish to create manual record</p>
        <p><button id="accept">Accept</button><button id="decline">Decline</button></p>
        </div>
        <div id="blockerState"></div>
    </main>
    <footer>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="sandscript.js"></script>
    </footer>
</body>

Answer 1

循环不会暂停以等待异步操作（如 setTimeout）完成 这正是 JavaScript（单线程语言）执行语句的方式。因此 setTimeout 在一个循环中是行不通的。

虽然不清楚为什么要将 triggerActions 的逻辑放在 for 循环中，如果它只是单击按钮的一个动作并且可能只有 xml 中的一个相应动作会被触发。

无论您的场景或业务要求是什么，您都可以按如下方式调整 triggerActions 以使其在当前场景中正常工作。

这个想法是存储索引，当您等待用户的特定条件时，for 循环将使用这些索引恢复，然后再次调用 triggerActions 以从原来的位置恢复循环离开了。

var startIndexOuterLoop, startIndexInnerLoop; //hold the reference of for loop index for the `AskForConfirmation` scenario

function triggerActions(params..., resumeMode) {

  var iA1, iA2;
  if (resumeMode) {
    iA1 = startIndexOuterLoop;
    iA2 = startIndexInnerLoop;
  } else {
    iA1 = 0;
    iA2 =
  }
  var outerLoopIterateOnce = false;
  for (; i < ...; i++) {
    //reset iA2 to 0 onward, right
    if (outerLoopIterateOnce) {
      iA2 = 0;
    }

    outerLoopIterateOnce = true;
    for (; i < ...; i++) {
      // ... statements

      if ( /*condition for AskForConfirmation */ ) {
        handleAskForConfirmation(iA1, iA2);
        return; //exit from function
      }


    }

  }

}

function handleAskForConfirmation(iA1, iA2) {
  startIndexOuterLoop = iA1+1;//1 added so as to continue next iteration
  startIndexInnerLoop = iA2+1;
  // add logic for wait time out etc
  //once thats expired or as per business logic call triggerActions again with one more parameter as true to resume the foor loop indirectly
  triggerActions(params..., true);
}

Answer 2

我通过跟踪操作编号并添加计数器机制来跟踪在操作完成时更新然后触发下一个操作的状态来解决问题

在 Javascript 中，我怎样才能停止触发任何进一步的迭代，直到满足条件

In Javascript how can I stop any further iterations from firing until a condition is met

javascript

jquery

ecmascript-5