jQuery Ajax JavaScript Execution

Question

I have jQuery ajax requesting a page that returns html with <script> tags inside that html, I have the dataType option set to "html" so that I get the JS inside the <script> tags executed, this works fine but the problem that it takes the browser from 2-3 seconds to evaluate the returned JS after the ajax response, why is the delay? it causes JS errors for users in hurry who try to click buttons immediately after the ajax response.

Please help.

Thanks.

• BarelyFitz: Is the javascript in your HTML directly included in a SCRIPT element, or does it use SCRIPT SRC=""?
• Ahmad: The retuend HTML contains both, ah, that could be the problem then, jQuery ajax waits for <script src> to load then executes the JS in the <script>, right?

Answer 1

Without seeing the code, its impossible to say what is causing the execution delay. However, you can profile the returned JS code yourself using Firebug's profiler.

console.profile("Returned JS");
//your AJAX call
console.profileEnd();

This will output an execution profile to Firebug's console, and you'll be able to see where the execution bottleneck is occurring.

http://getfirebug.com/console.html

Answer 2

When you add HTML to an element using jQuery, first jQuery searches for any SCRIPT elements in the HTML. If the HTML contains SCRIPT SRC="", then jquery attempts to asynchronously fetch the javascript file. This could be causing your delay.