java - 使用 Google 的快速按钮后 Phonegap 应用程序崩溃

Question

我有一个 phonegap 应用程序可以在不同页面的图库中显示图像。 我正在使用 Google 的快速按钮 https://developers.google.com/mobile/articles/fast_buttons减少页面切换时的 300ms 延迟。 我正在使用 https://github.com/alexblack/google-fastbutton 中的 js 文件 我正在做的是:

按钮:

<a data-role="button" data-theme="b" href="#" id="nextimage">Next</a>

javascript的init方法中的事件处理器:

$('#nextimage').fastClick(function(e) {
    showGalleryPage(nextPageIndex);  });

点击 3-4 次效果很好，但有时当我点击按钮时，应用程序会崩溃，控制会返回到第一页。 它在 Logcat 中没有通知我进行调试。 我想知道解决此问题的方法。 有人可以帮我调试吗？ 谢谢。

Answer 1

您的页面是否有任何滚动或允许任何类型的系统 UI 动画，如缩放等？如果是这样，您的问题可能与 PhoneGap 甚至 FastButton 实现无关，但您是 iOS6 中引入的严重错误的受害者。即使您禁用 FastButton 并仅使用 ontouchend 监听器，即使您使用没有 PhoneGap 的独立网页，您也可以轻松地重现此问题。

该错误的工作原理如下:如果在这些系统 UI 动画进行期间创建了任何间隔或超时，则这些间隔和超时将不起作用，更糟糕的是，即使在动画完成后重新创建它们也不会让他们工作。尤其是 JQ 动画在这里经常是个问题。如果您在页面滚动时调用任何 JQ 动画(使用 FastButton 使用的 ontoucstart/ontouchend 事件很容易做到这一点)，您的动画将失败，动画结束时的任何回调也会失败。

所以解决方案:

• 尽可能使用 CSS 动画。这当然只有在动画首先导致您的问题的情况下。如果是其他类型的 setInterval/setTimeout 中断了，CSS 动画将无济于事。

• 为使用 iOS6 中引入的 webkit 的 requestAnimationFrames 的计时器使用自定义包装器。看看并从这里下载:https://gist.github.com/4180482

我最终选择了第二个解决方案，但我不得不在一个地方修复代码，因为我的初始化出现问题。在它说的行中:

if(uid.indexOf && uid.indexOf(TIMERID) > -1){

我必须将其更改为:

if(uid && uid.indexOf && uid.indexOf(TIMERID) > -1){

此外，原始代码进行了严格的 iOS6 检查并仅在那时应用其包装函数。这对于可以即时更新内容的网站来说很好，但对于应用程序，我认为你想要更偏执一点，并假设这在 iOS7 和更高版本中可能保持不变(毕竟，它有时确实看起来就像 Apple 试图尽可能地破坏网络应用程序一样)所以你需要一个 ios6+ 检查。找到这样的行:

if (!navigator.userAgent.match(/OS 6(_\d)+/i)) return;

并将其替换为:

if(/(iPhone|iPod|iPad)/i.test(navigator.userAgent)) {
    if(/OS [2-5]_\d(_\d)? like Mac OS X/i.test(navigator.userAgent)) {
        // iOS 2-5, map to native Timers
        return
    } else if(/CPU like Mac OS X/i.test(navigator.userAgent)) {
        // iOS 1, map to native Timers
        return
    }
}
else
{
    // Not iOS, map to native Timers
    return
}