My JSPerf test case "breaks" while evaluating toggle() with callback

Question

While testing my answer to Adding HTML5 hidden attribute support to jQuery .toggle() method, I created a JSPerf test to determine how much slower .toggle(function() \[...\]) would be compared to .toggle(). To my amazement, the script with additional processing is reported to execute faster! Besides the results being counter-intuitive, I suspect a problem because I also see the toggling on the screen long after the results have returned.

How can I "fix" my test to get accurate results?

Answer 1

I.e.

$('button').click(function() {
    $('#myElement').toggle(function() { alert("called") })
})

The callback function you pass to toggle only gets executed after the toggle action completes. In other words, it’s an asynchronous action, so if you want to measure how long it takes until the callback is fired, use jsPerf’s async/defer feature.