Skip to content

Commit 2581542

Browse files
author
Matt Lee
committed
first commit
* added jquery.wait.js * added jquery.wait.min.js * updated readme
1 parent e18448d commit 2581542

File tree

3 files changed

+159
-2
lines changed

3 files changed

+159
-2
lines changed

‎README.md‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,36 @@
1-
jquery.wait
1+
# jquery.wait
22
===========
33

4-
inline window.setTimeout
4+
inline window.setTimeout
5+
6+
jquery.wait allows you to easily insert a delay into a chain of jquery
7+
methods. This allows you to use timeouts without uglifying your code and
8+
without having to use a custom queue.
9+
10+
example:
11+
12+
// add a class to element #foo, then remove 5 seconds later
13+
14+
// without jquery.wait
15+
$('#foo').addClass('myClass');
16+
window.setTimeout(function(){
17+
$('#foo').removeClass('myClass');
18+
}, 5000);
19+
20+
// with jquery.wait
21+
$('#foo').addClass('myClass').wait(5000).removeClass('myClass');
22+
23+
jquery.wait will work with any default jquery object methods, as well as any
24+
methods provided by plugins loaded *before* jquery.wait.
25+
26+
## using with css transitions
27+
28+
if you are using jquery.wait to add/remove classes that controls
29+
css transitions, the duration of the wait needs to be slightly longer than
30+
the transition time. So, if in the example above the class .myClass added a
31+
5 second transition of some sort, i would need to make the wait time longer.
32+
I recommend 100ms longer, though your needs may vary depending on the
33+
complexity of the animation.
34+
35+
If you are chaining jQuery transitions, it is better to use the default
36+
jquery .delay method, which has the same syntax but works with jquery queues

‎jquery.wait.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/**
2+
* jquery.wait - insert simple delays into your jquery method chains
3+
*
4+
* jquery.wait allows you to easily insert a delay into a chain of jquery
5+
* methods. This allows you to use timeouts without uglifying your code and
6+
* without having to use a custom queue.
7+
*
8+
* example:
9+
* // add a class to element #foo, then remove 5 seconds later
10+
*
11+
* // without jquery.wait
12+
* $('#foo').addClass('myClass');
13+
* window.setTimeout(function(){
14+
* $('#foo').removeClass('myClass');
15+
* }, 5000);
16+
*
17+
* // with jquery.wait
18+
* $('#foo').addClass('myClass').wait(5000).removeClass('myClass');
19+
*
20+
* jquery.wait will work with any default jquery object methods, as well as any
21+
* methods provided by plugins loaded *before* jquery.wait.
22+
*
23+
* !important - if you are using jquery.wait to add/remove classes that controll
24+
* css transitions, the duration of the wait needs to be slightly longer than
25+
* the transition time. So, if in the example above the class .myClass added a
26+
* 5 second transition of some sort, i would need to make the wait time longer.
27+
* I recommend 100ms longer, though your needs may vary depending on the
28+
* complexity of the animation.
29+
*
30+
* If you are chaining jQuery transitions, it is better to use the default
31+
* jquery .delay method, which has the same syntax but works with jquery queues
32+
*
33+
* @author Matthew Lee [email protected]
34+
*/
35+
36+
(function($){
37+
function jQueryDummy($real, delay, _fncQueue){
38+
var dummy = this;
39+
this.fncQueue = (!!_fncQueue) ? _fncQueue : [];
40+
this.delayCompleted = false;
41+
this.real = $real;
42+
43+
this.timeoutKey = window.setTimeout(function(){
44+
dummy.performDummyQueueActions.call(dummy);
45+
}, delay);
46+
}
47+
48+
jQueryDummy.prototype.addToQueue = function(fnc, arg){
49+
if (!this.delayCompleted || this.fncQueue.length > 0) {
50+
this.fncQueue.unshift({ fnc: fnc, arg: arg });
51+
}
52+
else {
53+
this.real[fnc].apply(this.real, arg);
54+
}
55+
return this;
56+
};
57+
58+
jQueryDummy.prototype.performDummyQueueActions = function(){
59+
this.delayCompleted = true;
60+
61+
var next;
62+
while (this.fncQueue.length > 0) {
63+
next = this.fncQueue.pop();
64+
// console.log('performing delayed function '+next.fnc+'('+next.arg+')');
65+
if (next.fnc === 'wait') {
66+
next.arg.push(this.fncQueue);
67+
this.real[next.fnc].apply(this.real, next.arg);
68+
break;
69+
} else {
70+
this.real[next.fnc].apply(this.real, next.arg);
71+
}
72+
}
73+
};
74+
75+
76+
$.fn.wait = function(delay, _queue) {
77+
return new jQueryDummy(this, delay, _queue);
78+
};
79+
80+
for (var fnc in $.fn) {
81+
jQueryDummy.prototype[fnc] = (function(fnc){
82+
83+
return function(){
84+
var arg = Array.prototype.slice.call(arguments);
85+
return this.addToQueue(fnc, arg);
86+
};
87+
88+
})(fnc);
89+
}
90+
91+
})(jQuery);

‎jquery.wait.min.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* jquery.wait - insert simple delays into your jquery method chains
3+
*
4+
* jquery.wait allows you to easily insert a delay into a chain of jquery
5+
* methods. This allows you to use timeouts without uglifying your code and
6+
* without having to use a custom queue.
7+
*
8+
* example:
9+
* // add a class to element #foo, then remove 5 seconds later
10+
*
11+
* // without jquery.wait
12+
* $('#foo').addClass('myClass');
13+
* window.setTimeout(function(){
14+
* $('#foo').removeClass('myClass');
15+
* }, 5000);
16+
*
17+
* // with jquery.wait
18+
* $('#foo').addClass('myClass').wait(5000).removeClass('myClass');
19+
*
20+
* jquery.wait will work with any default jquery object methods, as well as any
21+
* methods provided by plugins loaded *before* jquery.wait.
22+
*
23+
* !important - if you are using jquery.wait to add/remove classes that controll
24+
* css transitions, the duration of the wait needs to be slightly longer than
25+
* the transition time. So, if in the example above the class .myClass added a
26+
* 5 second transition of some sort, i would need to make the wait time longer.
27+
* I recommend 100ms longer, though your needs may vary depending on the
28+
* complexity of the animation.
29+
*
30+
* If you are chaining jQuery transitions, it is better to use the default
31+
* jquery .delay method, which has the same syntax but works with jquery queues
32+
*
33+
* @author Matthew Lee [email protected]
34+
*/(function(e){function t(e,t,n){var r=this;this.fncQueue=n?n:[];this.delayCompleted=!1;this.real=e;this.timeoutKey=window.setTimeout(function(){r.performDummyQueueActions.call(r)},t)}t.prototype.addToQueue=function(e,t){!this.delayCompleted||this.fncQueue.length>0?this.fncQueue.unshift({fnc:e,arg:t}):this.real[e].apply(this.real,t);return this};t.prototype.performDummyQueueActions=function(){this.delayCompleted=!0;var e;while(this.fncQueue.length>0){e=this.fncQueue.pop();if(e.fnc==="wait"){e.arg.push(this.fncQueue);this.real[e.fnc].apply(this.real,e.arg);break}this.real[e.fnc].apply(this.real,e.arg)}};e.fn.wait=function(e,n){return new t(this,e,n)};for(var n in e.fn)t.prototype[n]=function(e){return function(){var t=Array.prototype.slice.call(arguments);return this.addToQueue(e,t)}}(n)})(jQuery);

0 commit comments

Comments
 (0)