I'm using jQuery to capture a click event on a checkbox and call a function.

My issue is this: the function I'm calling is relatively slow to execute, and so the user sees a visible delay before the checkbox appears to be checked, which makes the interface appear sluggish and inelegant.

This fiddle demonstrates the problem: / or code here:

function slowFunction() { 
   var mystr;
    for (var i = 0; i < 5000000; i++) { 
        mystr += ' ';
    }
}
$('#mycheckbox').click(function() { 
   slowFunction();
});

Is there a way I can change things so that the click event still fires slowFunction, but doesn't delay the appearance of a tick in the checkbox?

Ideally what I'd like is an onChecked event for the checkbox, but I don't know if that exists.

NB: the reason I'm asking is because I'm using an iPhone Checkbox, and the relatively slow function that I call when my checkboxes changes makes it look sluggish, and not iPhone-like at all :)

I'm using jQuery to capture a click event on a checkbox and call a function.

My issue is this: the function I'm calling is relatively slow to execute, and so the user sees a visible delay before the checkbox appears to be checked, which makes the interface appear sluggish and inelegant.

This fiddle demonstrates the problem: http://jsfiddle/ZkUgq/4/ or code here:

function slowFunction() { 
   var mystr;
    for (var i = 0; i < 5000000; i++) { 
        mystr += ' ';
    }
}
$('#mycheckbox').click(function() { 
   slowFunction();
});

Is there a way I can change things so that the click event still fires slowFunction, but doesn't delay the appearance of a tick in the checkbox?

Ideally what I'd like is an onChecked event for the checkbox, but I don't know if that exists.

NB: the reason I'm asking is because I'm using an iPhone Checkbox, and the relatively slow function that I call when my checkboxes changes makes it look sluggish, and not iPhone-like at all :)

• javascript
• jquery

2 Answers 2

Why not defer it with setTimeout?

$("#mycheckbox").click(function() {
    setTimeout(slowFunction, 100);
}

Which will invoke your function 100ms after the click event occurs... adjust to suit.

settimeout will defer the slowFunction call until the checkbox check event is fired.

$('#mycheckbox').click(function() {     
       setTimeout(slowFunction,500); 
});