2017-03-08 57 views
0

我一直在試圖讓過去2周解決以下問題,我越來越無處,希望有人可以指出我在正確的方向;在JavaScript中我怎麼能停止任何進一步的重複發射,直到條件得到滿足

我有一個單頁應用程序,它使用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> 

的abiove表示當「#btn125」點擊火災AskForConfirmation功能,那麼如果用戶點擊了確認按鈕,過程手動錄像功能。

這些操作由一個循環遍歷,我需要爲AskForConfirmation停止循環,直到用戶完成確認或用戶給出否定響應,或者30秒的時間過去,然後放棄循環。

我已經嘗試setTimeout使用變量來控制發射下一個動作沒有成功,不能讓我的頭周圍異步/等待,如果這是可行的,請指導我如何做到這一點。

我在下面包含動作觸發循環;

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

我明白上面的代碼是缺少AskForConfirmation開關案例; –

+0

它simpy設置一個變量爲'等待',彈出一個燈箱的問題和是/否按鈕,然後用setTimeout循環,直到用戶點擊其中一個按鈕或30秒後更新變量 –

+3

您可能會得到更多的回覆如果您創建[最小,完整和可驗證](http://stackoverflow.com/help/mcve)示例。創造這種行爲本身可能會有所幫助。 – TrueWill

回答

0

我通過跟蹤動作數並添加計數器機制來跟蹤狀態,其上動作完成更新除去問題然後觸發下一個動作

+0

您可以提供一個片段來顯示您是如何實現這一目標的。 https://stackoverflow.com/help/how-to-answer –

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); 
 
}

+0

Amitesh,如果我正確理解這實際上是做什麼是存儲數組或值的對象,並退出循環。那麼一旦準備好繼續返回我以前使用數組或對象值的循環中的點? –

+0

雅右..但只是記住循環的索引足以恢復..無需存儲函數 – Amitesh

+0

的整個狀態(對象數組等)我會試試看。 –

相關問題