Javascript 在PhantomJS中等待没有setTimeout的元素

我正在编写一个函数来等待一个元素，下面是我的函数：

function waitForElement(query){
    var res="null";
    var start=Date.now();
    do{
        res=page.evaluate(function(query) {
            return document.querySelector(query)+"";
        }, query);
    } while (res==="null" && Date.now()-start<=100000);
    console.log(Date.now()-start);
    console.log(res.toString());
    return res!=="null";
}

---

有人能解释一下这里发生了什么吗？

只有在加载页面时才会调用page.open回调。这并不意味着页面中的所有内容都已加载，js已完全执行

此外，web页面上的js可能不会立即执行，特别是当站点使用MVC客户端框架（如AngularJS或Backbone.js）时。在页面加载事件之后，很多事情都完成了

---

使用setTimeout会给您一点延迟，以确保页面完全呈现。

JavaScript是单线程的。由于您正在进行繁忙的等待，因此您还阻止了页面加载和页面JavaScript的执行。在PhantomJS中不可能同步等待。您必须使用递归和异步方法，如PhantomJS examples文件夹中所示：

/**
 * Wait until the test condition is true or a timeout occurs. Useful for waiting
 * on a server response or for a ui change (fadeIn, etc.) to occur.
 *
 * @param testFx javascript condition that evaluates to a boolean,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param onReady what to do when testFx condition is fulfilled,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.
 */
function waitFor(testFx, onReady, timeOutMillis) {
    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, //< Default Max Timout is 3s
        start = new Date().getTime(),
        condition = false,
        interval = setInterval(function() {
            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
                // If not time-out yet and condition not yet fulfilled
                condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
            } else {
                if(!condition) {
                    // If condition still not fulfilled (timeout but condition is 'false')
                    console.log("'waitFor()' timeout");
                    phantom.exit(1);
                } else {
                    // Condition fulfilled (timeout and/or condition is 'true')
                    console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
                    typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
                    clearInterval(interval); //< Stop this interval
                }
            }
        }, 250); //< repeat check every 250ms
};

/**
 * Wait until the test condition is true or a timeout occurs. Useful for waiting
 * on a server response or for a ui change (fadeIn, etc.) to occur.
 *
 * @param testFx javascript condition that evaluates to a boolean,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param onReady what to do when testFx condition is fulfilled,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.
 */
function waitFor(testFx, onReady, timeOutMillis) {
    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, //< Default Max Timout is 3s
        start = new Date().getTime(),
        condition = false,
        interval = setInterval(function() {
            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
                // If not time-out yet and condition not yet fulfilled
                condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
            } else {
                if(!condition) {
                    // If condition still not fulfilled (timeout but condition is 'false')
                    console.log("'waitFor()' timeout");
                    phantom.exit(1);
                } else {
                    // Condition fulfilled (timeout and/or condition is 'true')
                    console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
                    typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
                    clearInterval(interval); //< Stop this interval
                }
            }
        }, 250); //< repeat check every 250ms
};

function waitForElement(selector, callback, timeout){
    waitFor(function check(){
        return page.evaluate(function(selector){
            return !!document.querySelector(selector);
        }, selector);
    }, callback, timeout);
}

setTimeout(function(){
    page.render('afterLogin.png');
    waitForElement('ul.coach li', function(){
        console.log('Exit');
        phantom.exit();
    }, 100000);
}, 50000);