Clean up my $.ajax and setTimeout in JQuery...

Posted on 2011-10-21
Last Modified: 2012-05-12
Hey Guys and Gals,
I have some code I have written in JQuery and it just looks a bit messy and just feels wrong.  Al of the 'display actions' I am doing would be for user experience.  Even though the data is returned in just a few miliseconds, I want to give the feel that the site is working...

The issue I was having is with the .delay() used in the .done() section of Jquery's $.ajax function.  All of the .delay's regardless of time would fire immediatly, so I switched to setTimeout and just timed my display actions.  

Is there a better way to do this?

Here is my code:
		var promoCode = document.getElementById('promo').value;
		$.ajax({type: "POST",url: "../scripts/ajaxPromo.asp",data: "promo=" + promoCode,}).done(function(promoInfo) {
		  var promoArray = promoInfo.split(":")
		  switch (promoArray[0]) {
			case '-1':
				setTimeout(function() {$('#status').html('<span style="color:#FF0000;">Bad promo code...</span>');}, 1000);
				setTimeout(function() {$('#status').hide();}, 2000);
				setTimeout(function() {$('#status').html('<img src="../images/ajax-loader.gif">&nbsp;Checking code');}, 2100);
				setTimeout(function() {$('#apply').fadeIn();}, 2800);
			case '0':
				setTimeout(function() {$('#status').html('<span style="color:#2770D0;">Success!');}, 1000);
				setTimeout(function() {$('#promoDisplay').slideDown('fast');},1500);
				setTimeout(function() {$('#promoTitle').html(promoArray[1]);},1000);
				setTimeout(function() {$('#promoTotal').html('Tuition is now: ' + promoArray[2]);},1000);
			case '1':
				//something here
				//same as -1  

Open in new window

Question by:Slim81
    LVL 81

    Accepted Solution

    LVL 4

    Author Comment

    Thanks for the post.  I spend most of my time fumbling through the Jquery website!  I have seen that documentation before....  

    Though I did just notice this paragraph on their site:
    "The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases."

    So maybe I am stuck using setTimeout...

    LVL 81

    Expert Comment

    jQuery delay is based on this :

    Try it, you don't need to cancel the timer in your case
    LVL 4

    Author Comment

    thanks for the link, I will check it out and give it a shot when I get back home (which is when I will be able to test it).

    Though, I am using JQuery 1.6 , which pulls from Google's CDN (I hope that is the right way to phrase it) .
    <script src=""></script>

    Open in new window

    By adding the block of code you mention in your previous post, will that mess anything up?  To me it looks like it will just replace the Jquery delay...which may work for me.
    LVL 81

    Expert Comment

    No, you don't need the script on the last link, jQuery already include it.
    LVL 4

    Author Comment

    Gotcha.  Glad I told you I use 1.6

    I will keep toying with it and see what I come up with.  It is just so weird how it doesn't have any delay at all (when using .delay(1000)) , regardless of the time frame I use, the events all happen immediatly....

    Hence the use of setTimeout....

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API ( has made its way into the popular lexicon of the English language.  A few years ago, …
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now