Take the 2-minute tour ×

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

$("#dash_up_arrow").bind('touchstart', function(e){

It seems to hang when I press the arrow rapidly. It's receiving the right number of touchstart 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?

share|improve this question
there is a ';' missing after $num++. And why you have prefixed your vars with '$' ?? I don't think this works. –  chriszero Feb 3 '11 at 12:36
@chriszero In JavaScript, it is OK to have variables that start with $. I also see some people using the $ prefix to indicate that it is a jQuery object, e.g. var $this = $(this); –  Thai Feb 3 '11 at 13:27
add comment

2 Answers

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
   if( !touched ) {
     touched = true;
     touched = false;

Another approach is to get the number before incrementing it:

   var currentNum = $field.html();

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

share|improve this answer
add comment
up vote 2 down vote accepted

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

 background-image: url('../images/header_background.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.

share|improve this answer
We are having a vaguely similar problem and would be interested which version of iPad did you experience this on? –  Peter V Apr 7 '12 at 16:41
@PéterVarga I was using the original iPad. I don't remember the iOS version, but it would have been whatever was current in Feb 2011. –  Seth Archer Brown Apr 11 '12 at 4:39
Thanks, we use iPad 2.. –  Peter V Apr 11 '12 at 7:29
add comment

Your Answer


