Editing Is jquery ajax affected by document ready This edit will create a new revision. Your details (optional) Name Email (won’t be displayed; might be used for Gravatar) URL Test case details Title * Published (uncheck if you want to fiddle around before making the page public) Description (in case you feel further explanation is needed)(Markdown syntax is allowed) Testing whether jquery "DOM ready" handler has any effect on the triggering or handling of the response of asynchronous jquery ajax. To make the tests fair, a javascript timeout is used to simulate each jquery ajax trigger and response. Sample html markup has been included to better demonstrate loading of the DOM. Are you a spammer? (just answer the question) Preparation code Preparation code HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div id="page"> <div id="header"> <h1>Sample markup</h1> </div> <div id="search"> <form action="" method="get"> <label>Search</label> <input type="text" name="searchterm"></input> </form> </div> <div id="main"> <div class="content yycphoto"> <img src="../img/photo.jpg" class="background" /> <div class="body overlay"> <h2>Photo Title</h2> </div> <div class="context overlay"> <h3>yycphoto</h3> <a class="icon pin">Pin to dashboard</a> </div> </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra luctus nulla eu consequat. Ut vehicula fringilla purus ut elementum. Vivamus erat elit, venenatis eu euismod a, hendrerit sed lacus. Donec mattis justo vitae leo eleifend a rhoncus ante semper. Aenean ultrices auctor posuere. Nulla facilisi. Vivamus laoreet, magna quis fringilla consectetur, metus eros eleifend justo, et condimentum arcu nibh pulvinar felis. Ut et ante turpis. Quisque luctus enim sit amet neque porta ullamcorper. Morbi vehicula purus et nisi consequat pharetra. Donec tincidunt dictum lorem vitae ullamcorper. Sed malesuada laoreet quam vel volutpat. Vestibulum eu nunc orci. Nulla in odio nec lorem facilisis lacinia. Integer tincidunt vulputate massa, ultrices tincidunt justo lacinia id. Curabitur vitae consequat magna. Phasellus tristique, lacus sed sollicitudin bibendum, tortor neque molestie diam, vel fermentum leo dui at ligula. Nullam nunc erat, mattis ut molestie vitae, malesuada ac nunc. Nullam adipiscing lectus ac dolor condimentum rhoncus. Donec convallis viverra orci at laoreet. Aenean quis felis augue. Nulla gravida orci vitae ligula iaculis mollis. Nulla adipiscing, tellus vel bibendum suscipit, dolor massa consequat ipsum, at pellentesque leo ligula in sapien. Suspendisse potenti. Morbi ut lacus eget augue vehicula tincidunt in ac ligula. Fusce sed aliquam nisl. Morbi cursus tristique augue, quis commodo nulla dignissim nec. Sed tristique congue pretium. Nam ac tellus pharetra lectus blandit euismod eget a tortor. Fusce felis orci, feugiat semper tristique elementum, imperdiet nec sapien. Nam gravida venenatis nisi egestas tincidunt. Nam quis porttitor eros. Curabitur id elit lorem. Vestibulum non nisi lorem, a sollicitudin ipsum. In a enim ut felis molestie ultricies quis et dolor. Suspendisse gravida bibendum mi non accumsan. Donec egestas sem sed ipsum sollicitudin imperdiet. Sed quis nisi et tellus commodo vestibulum. Curabitur ipsum lacus, consectetur at pharetra eu, vulputate sed neque. Phasellus egestas ultricies ullamcorper. Cras interdum accumsan urna et viverra. Vestibulum risus lorem, dictum bibendum congue in, laoreet id ipsum. Fusce elementum risus sollicitudin tortor molestie at mattis lacus sodales. Nam et accumsan purus. Vestibulum consectetur volutpat bibendum. In et ullamcorper purus. Duis tempor lobortis dapibus. Sed porttitor sem tempus nulla semper dapibus. Integer viverra varius sapien sed dapibus. Morbi nunc elit, imperdiet ac vestibulum sit amet, congue eu enim. Cras leo lacus, placerat non posuere in, congue hendrerit ante. Proin vel nisl in nulla ultrices mattis. Aenean feugiat dignissim sapien vel ullamcorper. Donec dictum condimentum tortor, accumsan bibendum ante scelerisque eget. Vestibulum interdum facilisis mauris, sed luctus arcu tristique sollicitudin. Nam quis ligula risus. Quisque vel urna vel orci faucibus tristique et quis sapien. Aliquam rutrum elementum eros in mattis. Praesent ultrices auctor auctor. </div> </div> <ul id="footer"> <li><a href="#">Privacy<span class='gt-tiny'> Policy</span></a></li> <li><a href="#">Terms<span class='gt-tiny'> and Conditions</span></a></li> <li><a href="#">Contact<span class='gt-tiny'> Us</span></a></li> </ul> </div> Include JavaScript libraries as follows: <script src="//cdn.ext/library.js"></script> Define setup for all tests (variables, functions, arrays or other objects that will be used in the tests) (runs before each clocked test loop, outside of the timed code region) (e.g. define local test variables, reset global variables, clear canvas, etc.) (see FAQ) var TIMEOUT_VALUE = 1500; Define teardown for all tests (runs after each clocked test loop, outside of the timed code region) (see FAQ) Code snippets to compare Test 1 Title Async (check if this is an asynchronous test) Code // wait until DOM is ready $(document).ready(function() { // mock jquery ajax request setTimeout(function(){ // do something with data alert("Hello") },TIMEOUT_VALUE); }); Test 2 Title Async (check if this is an asynchronous test) Code setTimeout(function(){ $(document).ready(function() { alert("Hello"); }); },TIMEOUT_VALUE); Test 3 Title Async (check if this is an asynchronous test) Code setTimeout(function(){ $(document).ready(function() { alert("Hello"); }); },TIMEOUT_VALUE); setTimeout(function(){ $(document).ready(function() { alert("Hello again"); }); },TIMEOUT_VALUE); Test 4 Title Async (check if this is an asynchronous test) Code $(document).ready(function() { setTimeout(function(){ // 2nd doc ready should fire instantly since already "ready" $(document).ready(function() { alert("Hello"); }); },TIMEOUT_VALUE); }); Test 5 Title Async (check if this is an asynchronous test) Code $(document).ready(function() { setTimeout(function(){ alert("Hello"); },TIMEOUT_VALUE); }); $(document).ready(function() { setTimeout(function(){ alert("Hello again"); },TIMEOUT_VALUE); });