![]()
Introduction
In this article I will cover the custom jQuery effect known as "delay". It's a jQuery way of implementing the JavaScript timers though it is not a replacement of the original JavaScript timers. I will also cover the options available with delay effect like duration and queue name. Later in this article I will also demonstrate the use of a delay by showing the demo live. So let's start.
About delay method
Delay comes under the custom effect category in jQuery. Its sole use is to delay the execution of subsequent items in the execution queue. Its syntax is:
.delay( duration [, queueName ] )
duration is the amount of delay to insert in between the events.
queueName is a name of the queue in which the delay time is to be inserted. By default it is a "fx" queue. A "fx" queue is also known as an effects queue.
This method is added in jQuery v 1.4, it allows the execution of subsequent items to be delayed. This method can be used with an effect queue as well as with a custom queue.
Another important point is only those methods that can be delayed that are in a queue. For example "show()" and "hide()" doesn't use the effect queue so they can't be delayed using a delay with the effects queue. Whereas "fadeIn()" and "fadeOut()" uses the effects queue so they can be delayed using a delay.
Duration is provided in milliseconds. The higher the duration the slower the animation speed and the lower the duration the higher the animation speed.
Preparing workspace
Throughout this article I'll be working with the following HTML and CSS.
HTML
<html>
<head>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<linkhref="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css"rel="stylesheet"type="text/css"/>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<metacharset=utf-8/>
</head>
<body>
<divid="test"></div>
</body>
</html>
CSS
#test{
width:100px;
height: 100px;
background-color: red;
}
Queue in delay
By default a delay method assumes "fx" or the effects queue. Most effects are processed through the "fx" queue. But not all the DOM manipulation methods use these fx tools. To add a delay in these methods we need to explicitly provide a queue name or we can use an anonymous queue.
For instance consider the following code snippet:
$("#test").delay(500).hide(500);
In the code above hide will be executed without any delay since it manipulates the display property of an element. To overcome this issue we can use the anonymous queue. Check the following code.
$("#test").delay(500).queue(function(next){
$("#test").hide(500).dequeue();
});
Using delay in Chaining
Chaining is a way of executing a series of functions on an element in one statement. A delay is often used while chaining the several effects on an element.
Example
$("#test").slideUp(300).delay(1000).slideDown(300).delay(1000).animate({height:"150px"},300).delay(1000).fadeTo(500,0.5).delay(1000).slideUp(300);
Live Preview
![]()
![]()
![]()
![]()
Example 1 Delay with duration
$("#test").draggable({
"stop":function(){
$(this).delay(1000).animate({
top:"0px",
left:"0px"
},500);
}
})
Live Preview
![]()
Example 2 Delay with Queue
$("#test").delay(500,"myq").queue("myq",function(next){
$("#test").hide(500);
console.log("Q1");
next();
});
$("#test").delay(500,"myq").queue("myq",function(next){
$("#test").show(500);
console.log("Q2");
next();
}); $("#test").delay(2000,"myq").queue("myq",function(next){
$("#test").slideUp(1000);
console.log("Q3");
next();
});
$("#test").dequeue("myq");
Live Preview
![]()
![]()
![]()
In the preceding example all the effects are run through the "myq" queue, not from the default "fx" queue. the last line "dequeue" is required to execute all the functions pumped in a queue.
Summary
A delay is good enough to serve as a basic timer but still it can't replace the native JavaScript timers. jQuery has no method to emulate JavaScript's setInterval() function. Similarly we can't cancel the delay method whereas in JavaScript timers we can do that.
That's all for this article. I hope you have found it useful. Don't forget to comment and share.