【问题标题】:Remove the 300ms delay from phonegap apps消除 phonegap 应用程序的 300 毫秒延迟
【发布时间】:2013-10-11 12:00:44
【问题描述】:

我一直在努力让我的应用响应更快,但不幸的是似乎没有任何帮助。 我正在使用 PhoneGap,因此我遇到了著名的 300 毫秒触摸事件延迟。

这会让应用感觉非常迟钝和缓慢,这不是一个选择。

我看到一些像 Fastclick.js 这样的库为 jQuery 移动用户解决了这个问题,但我没有使用 jQuery 移动。我正在使用 HTML、CSS、JavaScript 和 jQuery 制作我的应用程序。

我真的需要找到一种方法来消除触摸点击的 300 毫秒延迟。 期待我能得到的任何帮助。

谢谢。

【问题讨论】:

  • 非常感谢这个问题!!!!

标签: cordova webkit


【解决方案1】:

Christophe Coenraets 在他的Top 10 Performance Techniques for PhoneGap Applications 中解决了这个问题。这是第 6 期,视频可在 Adobe TV 上观看(第 31 分钟)。

基本上,300 毫秒的延迟不是错误或性能问题,它是检测可能的双击所必需的功能。

摆脱这种延迟的解决方案是结合使用touch events 而不是click 事件,如下所示:

var trackingClick = false;
var targetElement = null;
var touchStartX = 0;
var touchStartY = 0;
var touchBoundary = 10;

target.addEventListener('touchstart', function(event) {

    trackingClick = true;
    targetElement = event.target;
    touchStartX = event.targetTouches[0].pageX;
    touchStartY = event.targetTouches[0].pageY;

    return true;
});

target.addEventListener('touchend', function(event) {

    trackingClick = false;

    //handle click event
    ...

    return false;
});

target.addEventListener('touchmove', function(event) {
    if (!trackingClick) {
        return true;
    }

    // If the touch has moved, cancel the click tracking
    if (targetElement !== event.target 
        || (Math.abs(event.changedTouches[0].pageX - touchStartX) > touchBoundary 
        || (Math.abs(event.changedTouches[0].pageY - touchStartY) > touchBoundary)) {
        trackingClick = false;
        targetElement = null;
    }

    return true;
});

target.addEventListener('touchcancel', function() {
    trackingClick = false;
    targetElement = null;
});

但这基本上就是FastClick 正在做的事情(事实上,上面的sn-p 只是一个非常基本的例子,是从fastclick source code 中抄袭而来的)。还有很多其他情况需要处理,所以如果你不想实现自己的库,你应该仔细看看 FastClick。它不仅适用于 jQuery mobile 用户,实际上它甚至不需要 jQuery,它只是一个自包含的小型库。

jQuery 移动用户注意事项:您可以使用 FastClick,但您应该注意内置的类似功能:vclick

tl;dr :如果您没有 jQuery Mobile,请使用 FastClick

【讨论】:

  • 感谢您提供此信息。我将 fastclick.js 添加到我的项目中,并添加了 window.addEventListener('load', function() { FastClick.attach(document.body); }, false);到 deviceReady 函数,但仍然没有。没有得到改善。 :/ 任何想法为什么会发生这种情况?
  • @alwaysStuck 如果不查看整个代码,真的很难判断出了什么问题。您应该发布一些代码(最好是SSCCE),可能是在一个新问题中。
  • 我认为您的回答对于我最初的问题是正确的。唯一的问题可能是我的代码在某处崩溃了,但由于这不是最初问题的一部分,我将您的答案标记为已接受。再次感谢!
  • 可能有人可以破解 UIWebView - stackoverflow.com/questions/55155560/…
【解决方案2】:

Fastclick 不适合我。 也许它不支持 Phonegap 或它正在使用的 webview。

修复Phonegap/cordova中300ms延迟的唯一方法:

$('yourElement').on( 'touchstart', function ( startEvent ) {});

而不是点击。包括 fastclick 在内的任何其他解决方案在 Phonegap 中均无效。

【讨论】:

  • 是的,完全相同的问题,它完全有道理......解决方案,使用快速点击:p
【解决方案3】:

在触发点击事件时出现一些问题后,我用一个超级最小的解决方案解决了这个问题。本示例使用 jQuery。

$(document).on('touchstart', '.clickable', function(e){
    // This prevents the click to be completed
    // so will prevent the annoying flickering effect
    e.preventDefault();
});

您必须将 .clickable 类添加到您想要从中消除 300m 延迟的任何元素。

然后,将所有点击事件更改为 touchstart 事件,这样就可以了

$('#elementid').click(function(e){
   console.log('ex event'); 
}

现在应该是这个

$(document).on('touchstart', '#elementid', function(e){
   console.log('new event'); 
}

【讨论】:

  • 您的解决方案很有用。很好的解释!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-12-15
  • 2012-08-27
  • 1970-01-01
  • 2013-08-08
  • 2017-07-31
  • 1970-01-01
  • 2021-05-04
相关资源
最近更新 更多