如何在 jQuery Mobile 中检测/查询当前正在进行的页面更改/转换？

Question

如何检测/查询 jQuery Mobile (jQM) 中当前是否正在进行页面更改/转换？

我的目标是防止在页面之间切换时打开对话框。目前，当页面更改事件正在进行时打开对话框时，UI 会中断。

对此有什么想法吗？

Answer 1

在 JQM 1.4.0 中，ui-mobile-viewport-transitioning 类在转换期间添加了 body 标记，因此以下内容对我有用：

if (!$("body.ui-mobile-viewport-transitioning").length) {
   //do something
}else{
    console.log("Don't do it we are transitioning")
    return false
 }

Answer 2

• pagebeforeshow

在正在显示的页面上、转换开始之前触发。

• pagebeforehide

在页面被隐藏、转换开始之前触发。

• pageshow

在转换完成后正在显示的页面上触发。

• pagehide

在页面转换完成后被隐藏时触发。

http://jquerymobile.com/demos/1.0a4.1/ #docs/api/events.html

Answer 3

我没有在 jQuery Mobile 中找到过渡状态信息，但是您可以简单地添加三个事件，一个在更改之前，一个在更改之后，一个在页面更改失败时添加。然后，将当前是否发生转换保留在全局变量中：

window.transitioning = false;

$(document).on("pagebeforechange", function() { transitioning = true; });
$(document).on("pagechange", function() { transitioning = false; });
$(document).on("pagechangefailed", function() { transitioning = false; });

在本例中，我创建了一个全局变量 transitioning 但您可以在您认为合适的位置创建此变量，例如在对话框中创建一个局部变量处理程序而不是使用全局变量。

您现在可以像这样添加您的条件：

if(!transitioning) {
  // Do your stuff
} else {
  // Delegate the events by listening for pagechange and then do your stuff
}