如何进行循环以等待元素，然后再进行下一次迭代

Question

I have a for loop with an array of xpaths which selects button elements and selects an option in a select box. This should happen one by one for each array item. The code I have works more or less but doesn't wait for the option element if element is null. I want the for loop to try finding the element until it is found before executing the rest of the code in the for loop and moving to next iteration.

case = ["xpath1", "xpath2", "xpath3", "xpath4"];

function loopThroughArray(case) {
    for (var i = 0; i <case.length; i++) {
        (function(i) {
            setTimeout(function() {
                //start - getting the corresponding elements and clicking it
                var dt_links = document.evaluate(case[i], document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                var dtLinks = dt_links.snapshotLength;
                if (dtLinks != 0) {
                    for (var a = 0; a < dtLinks; ++a) {
                        dt_links.snapshotItem(a).click();
                    }
                    var ex = document.evaluate("//select/optgroup/option[contains(text(),'new item')]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                    var expEl = ex.snapshotItem(0);
                    if (expEl == null) {
                        console.log("new item option is not available");
                    }
                   else{
                    //"new item" option is selected
                    ex.snapshotItem(0).selected = true
                    var exp = $('select')[2] //select box
                    console.log(exp)
                    if ("createEvent" in document) {
                        var evt = document.createEvent("HTMLEvents");
                        evt.initEvent("change", false, true);
                        exp.dispatchEvent(evt);
                    } else {
                        exp.fireEvent("onchange");
                        console.log("change event to be fired");
                    }
               }
                }
            }, 1500 * i);
        })(i);
    };
}
loopThroughArray(case);

so basically, I need to iterate over the array selecting some button elements and select an option in select box, wait for iframe to load and the select box and its options to become populated before selecting the next set of buttons of the next iteration and so on.

Answer 1

It's the SetTimeout what is making your code instantly return and therefore starting all timeouts at almost once.

I believe you could achieve what you want by creating a recursive function instead of a for-loop:

var recursiveFunc = function(i) {
        setTimeout(function() {
            ...
            if(i < case.lenght - 1){
                 recursiveFunc(i++)
            }
        }, 1500 * i);
    })(0)

Edit as per comments, it seems that you couldn't exhaust the stack, even if your array is too long.