Question

我正在使用javascript来允许用户增加或减少表单字段。

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

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

奇怪的是，大约1/3的时间我加载页面它完美无缺地工作 - 无论我按箭头多快，数字增加与按下同步。然后，当我重新加载页面时，它将重新挂起。

我已确保后台没有正在运行的应用

有什么原因造成这种情况？

Answer 1

解决了它。几乎让我疯狂，但这是违法的代码

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

这是正确的问题是CSS根本不是javascript。我创建了一个没有样式的测试页面，只有足够的javascript来复制我想要做的事情。它每次都很棒。

然后我测试了测试页面和真实页面之间的所有差异，并且归结为一个 - 测试页面没有CSS。所以我在真实页面上杀了CSS并且它有效。

最后将其缩小到2行。显然有多个背景会减慢Safari对渲染更改的速度。奇怪的错误。

感谢所有发帖的人的帮助。

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);
});

也许两者的结合完全解决了它？

我不知道为什么大约1/3工作页面加载它有效，所以上面的建议可能根本不会改变任何东西。不幸的是，我无法测试它没有iPad; - ）

iPad safari javascript增加器挂

2 个答案: