javascript - 函数完成后 jQuery 移动执行转换

Question

我目前正在使用当前的 html 进行 jQuery Mobile 页面转换：

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

这里的save()函数是保存当前页面上的canvas的东西。

然而，save() 函数似乎与页面转换一起异步运行，因此有时页面转换没有设法完全保存我想要的信息。

有没有办法在 jQuery Mobile 执行页面转换之前完全完成一个功能？

--更新--

这里有一个 jsFiddle 示例供大家使用：

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

（请注意控制台中pagebeforechange 在save trigger 之前触发）

Answer 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()。

---

根据提供的 FIDDLE 进行编辑：

玩小提琴我稍微改变了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;
    }
};

现在它可以按预期工作了。