0

I'm currently using the current bit of html for jQuery Mobile page transitions:

<a href="#page2" data-role="button" data-transition="flip" onclick="save()">page2</a>

The save() function here is something that saves the canvas on the current page.

It seems however the save() function runs asynchronously along with the page transition and hence at times the page transitions without having managed to fully save the information I wanted it to.

Is there a way to completely finish a function before jQuery Mobile executes the page transition?

--update--

Here's a jsFiddle example for all to play around with:

http://jsfiddle.net/nMR85/1291/

(notice the pagebeforechange firing before the save trigger in the console)

4

1 回答 1

1

试试这个解决方案：

var transition = false;

function save() {

    if(!transition) {
        var callback = function() {
            transition = true;
            $("a").click();
        };

        // your aynchronous code which will trigger callback after it finishes executing

        return false;
    }
    else {
        transition = false;
    }
}

此函数的第一次执行不会触发转换（return false阻止执行每个附加的下一个事件处理程序）。第二次执行会，但不会触发发送。当然，将transition变量放入全局上下文不是一个好习惯，但这只是一个如何处理这个问题的想法。

另外我认为在 onclick 里面（在 HTML 中）你应该有return save().

根据提供的小提琴编辑：

玩小提琴我a稍微改变了元素：

<a id="goto_trigger" href="#p2" data-role="button" onclick="return save()">Go To Page 2 with return</a>

脚本也应该是这样的：

$(document).bind('pagebeforechange', function(e, data) {
    console.log("pagebeforechange");
});

var transition = false;

function save() {
    if(!transition) {
        setTimeout(function(){
            alert("save trigger");
            transition = true;
            $("#goto_trigger").click();
        },3000);
        return false;
    }
};

现在它按预期工作。

于 2013-04-23T01:36:30.773 回答