iPad safari javascript incrementer hanging

I'm using javascript to allow a user to increment or decrement a form field.

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

It seems to hang when I press the arrow rapidly. It's receiving the right number of touchs开发者_运维知识库tart events, but if I press it too rapidly it will skip numbers.

The weird thing is about 1/3 of the time I load the page it works flawlessly--no matter how fast I press the arrow the number increments in sync with pressing it. Then I when I reload the page it will go back to hanging.

I've made sure there are no apps running in the background

Any clue what's causing this?

---

Solved it. Almost drove me insane but here's the offending code

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

That's right the problem was with CSS not javascript at all. I made a test page with no styles and only enough javascript to replicate what I was trying to do. It worked great every time.

Then I tested every difference between the test page and the real page, and got down to one--the test page had no CSS. So I killed the CSS on the real page and it worked.

Finally narrowed it down to 2 lines. Apparently having multiple backgrounds slows down safari from rendering changes to html. Weird bug.

Thanks for the help from everyone who posted.

---

Just a shot in the dark, but maybe the touches are "overlapping" sometimes, so there is a race condition where one touch started before another finishes later than the latter.

Does this help? (might not solve it completely, because the race isn't 100% eliminated)

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

---

Another approach is to get the number before incrementing it:

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

Maybe a combination of both solves it completely?

I'm don't know why the about 1/3 working page-loads it works, though, so the suggestions above might not change anything at all. And unfortunately I cannot test it not having an iPad ;-)