iPad safari javascript增加器掛

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