iPad Safari JavaScript增量器挂起

Question

我正在使用 JavaScript 实现让用户增加或减少表单字段的功能。

$("#dash_up_arrow").bind('touchstart', function(e){
   $num++
   $field.html($num);
});

当我快速按箭头时，它似乎会卡住。它接收到了正确数量的touchstart事件，但如果我按得太快，它就会跳过数字。

奇怪的是，大约三分之一的时间，当我加载页面时，它可以完美地工作 - 无论我多快地按箭头，数字都会与按下它同步增加。然后，当我重新加载页面时，它就会卡住。

我已经确保没有其他应用程序在后台运行。

有什么线索导致这种情况吗？

- Seth Archer Brown

---

$num++ 后面缺少一个 ';'。还有，为什么你在变量前加上了 '$' 前缀？我不认为这会起作用。 - chriszero

@chriszero 在JavaScript中，变量以$开头是可以的。我也看到一些人使用$前缀来表示它是一个jQuery对象，例如：var $this = $(this); - Thai

Answer 1

解决了。几乎让我发疯，但这就是有问题的代码。

 background-image: url('../images/header_background.png'),
                   url('../images/swirly_pattern_light.png'); 

没错，问题出在CSS上，而不是JavaScript。我创建了一个测试页面，没有样式，只有足够的JavaScript来复制我想做的事情。每次都可以很好地运行。

然后，我测试了测试页面和真实页面之间的每个差异，并找到了一个——测试页面没有CSS。所以我取消了真实页面上的CSS，它就可以工作了。

最终缩小到两行代码。显然，具有多个背景会减慢Safari渲染HTML更改的速度。奇怪的错误。

感谢所有发帖者的帮助。

- Seth Archer Brown

---

我们遇到了一个类似的问题，想知道您在哪个版本的iPad上遇到了这个问题？ - ՕլՁՅԿ

@PéterVarga 我使用的是原版iPad。我不记得iOS版本，但应该是2011年2月当时最新的版本。 - Seth Archer Brown

Answer 2

这只是一个猜测，可能有时候触摸事件会“重叠”，因此存在竞态条件，在一个触摸事件启动之前，可能有另一个触摸事件结束的时间晚于后者。

这个猜测对您有帮助吗？（不能完全解决问题，因为竞态条件并未被100%消除）

var touched = false; // add a global var to save 
                     // whether a touch is being processed
$("#dash_up_arrow").bind('touchstart', function(e){
   if( !touched ) {
     touched = true;
     $num++;
     $field.html($num);
     touched = false;
   }
});

---

另一种方法是在增加数字之前获取它：

$("#dash_up_arrow").bind('touchstart', function(e){
   var currentNum = $field.html();
   $field.html(++currentNum);
});

也许两者的结合可以完全解决这个问题？

我不知道为什么大约三分之一的页面加载时它可以工作，所以上面的建议可能根本不会改变任何东西。不幸的是，我没有iPad无法进行测试；-）

- Markus