过去两周我一直试图让以下问题得到解决而且无处可去，希望有人可以指出我正确的方向;
我有一个单页面应用程序，它使用JS和jQuery以及xml逻辑条件和操作。
JS允许函数异步操作很棒，但我需要解决一个问题;
当用户单击元素时，js通过xml并查找与元素ID相关的节点，检查是否满足条件集并触发相关操作。 XML的片段如下所示;
<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>
abiove表示点击'＃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>
答案 0 :(得分：0)
循环不会暂停以完成异步操作（如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);
}
答案 1 :(得分：0)
我通过跟踪操作编号并添加计数器机制来跟踪状态，然后在操作完成时更新然后触发下一个操作