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

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:
$('#apply').click(function(){
		$('#apply').hide();
		$('#status').show();
		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);
				break;
			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);
				break;
			case '1':
				//something here
				break;
			default:
				//same as -1  
		  }
		});
	});

Open in new window


Thanks!
LVL 4
Slim81Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
0
 
Slim81Author Commented:
leakim971,
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...


0
 
leakim971PluritechnicianCommented:
jQuery delay is based on this : http://www.hashbangcode.com/blog/enabling-use-delay-pre-jquery-14-531.html

Try it, you don't need to cancel the timer in your case
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Slim81Author Commented:
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) .
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></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.
0
 
leakim971PluritechnicianCommented:
No, you don't need the script on the last link, jQuery already include it.
0
 
Slim81Author Commented:
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....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.