在jquery mobile中导航时等待页面加载

Question

我有一个使用jQuery Mobile构建的单页Web应用程序。 用户完成某个操作后，我想以编程方式将其带回到菜单页面，这涉及到返回历史记录，然后对菜单页面的元素执行一些操作。

简单地做

window.history.go(-1); //or $.mobile.back();
doSomethingWith(menuPageElement);

不起作用，因为返回动作是异步的，即我需要一种在调用doSomethingWith()之前等待页面加载的方式。

我最终使用window.setTimeout（），但是我想知道在jQM中是否没有更简单的方法（不同的模式？）来做到这一点。 另一种选择是侦听页面加载事件，但从代码组织的角度来看，我发现情况更糟。

（编辑：事实证明，移动Safari不支持本机js承诺；将需要由第3方库替代）

//promisify window.history.go()
function go(steps, targetElement) {
    return new Promise(function(resolve, reject) {
        window.history.go(steps);
        waitUntilElementVisible(targetElement);

        //wait until element is visible on page (i.e. page has loaded)
        //resolve on success, reject on timeout
        function waitUntilElementVisible(element, timeSpentWaiting) {
            var nextCheckIn = 200;
            var waitingTimeout = 1000;

            timeSpentWaiting = typeof timeSpentWaiting !== 'undefined' ? timeSpentWaiting : 0;

            if ($(element).is(":visible")) {
                resolve();
            } else if (timeSpentWaiting >= waitingTimeout) {
                reject();
            } else { //wait for nextCheckIn ms
                timeSpentWaiting += nextCheckIn;
                window.setTimeout(function() {
                    waitUntilElementVisible(element, timeSpentWaiting);
                }, nextCheckIn);
            }
        }
    });
}

可以这样使用：

go(-2, menuPageElement).then(function() { 
    doSomethingWith(menuPageElement);
}, function() {
    handleError();
});

在这里而不是在Code Review中发布它，因为问题是关于在jQM / js中执行此操作的替代方法，而不是代码本身的性能/安全性。

Answer 1

更新资料

要区分是否从pageX定向用户，可以在pagecontainer更改功能中传递自定义参数。 在pagecontainerchange ，检索该参数，并根据bind pagecontainershow仅一次执行doSomething() 。

$(document).on("pagecreate", "#fooPage", function () {
    $("#bar").on("click", function () {
        /* determine whether the user was directed */
        $(document).one("pagecontainerbeforechange", function (e, data) {
            if ($.type(data.toPage) == "string" && $.type(data.options) == "object" && data.options.stuff == "redirect") {
                /* true? bind pagecontainershow one time */
                $(document).one("pagecontainershow", function (e, ui) {
                    /* do something */
                    $(".ui-content", ui.toPage).append("<p>redirected</p>");
                });
            }
        });
        /* redirect user programmatically */
        $.mobile.pageContainer.pagecontainer("change", "#menuPage", {
            stuff: "redirect"
        });
    });
});

演示版

---

您需要依赖pageContainer事件 ，可以选择以下任何事件： pagecontainershow ， pagecontainerbeforeshow ， pagecontainerhide和pagecontainerbeforehide 。

前一页完全隐藏时并且在显示菜单页之前，将发出前两个事件。

在隐藏上一页期间但在前两个事件之前发出后两个事件。

所有事件都带有ui对象，具有两个不同的属性ui.prevPage和ui.toPage 。 使用这些属性来确定何时运行代码。

请注意，以下代码仅适用于jQM 1.4.3

$(document).on("pagecontainershow", function (e, ui) {
   var previous = $(ui.prevPage),
       next = $(ui.toPage);

   if (previous[0].id == "pageX" && next[0].id == "menuPage") {
       /* do something */
   }
});