Si vous faites du javascript, vous vous êtes certainement déjà posé cette question : Comment faire une pause en javascript ?
Il existe deux plugins sleep et delay, et le mix des deux 'wait' pour jquery :
Vous retrouverez tout ici : https://www.inet411.com/articles/jquery/wait-plugin.html avec des demos.
Apparemment le site est offline : voici l'article
Jquery wait plugin
I found a delay() plugin here and a pause() plugin here. Both of which were great in their own way. The pause() plugin allows for certain features that the delay() plugin does not and visa-versa.
With the pause plugin you can chain as such:
$('#some_div_id').slideDown('fast').pause(2000).slideDown('fast');
That will slide down the #some_div_id div and "pause" for 2 seconds and then slide up the #some_div_id div.
That is great but I also like to put in my own functions. ie.
$('#some_div_id').slideDown('fast').pause(2000,function(){
$('#some_other_div_id').slideDown('fast');
});
The above will not work with the "pause" plugin but will work with the delay plugin as shown below:
$('#some_div_id').slideDown('fast').delay(2000,function(){
$('#some__div_id').slideDown('fast');
});
So I simply combined both scripts and allowed for optional chain-ability, default options and a custom callback upon completion.
Here is the script. It's not the delay plugin and it's not the pause plugin - it's BOTH. What word means "pause" and/or "delay"? I guess WAIT will do. So here is the wait plugin for jQuery. Save this file as jquery.wait.js. It's about 4kb.
// Delay Plugin for jQuery
// - https://www.evanbot.com
// - copyright 2008 Evan Byrne
/*
* Jonathan Howard
* jQuery Pause
* version 0.2
* Requires: jQuery 1.0 (tested with svn as of 7/20/2006)
* Feel free to do whatever you'd like with this, just please give credit where
* credit is do.
* pause() will hold everything in the queue for a given number of milliseconds,
* or 1000 milliseconds if none is given.
*/
// Wait Plugin for jQuery
// https://www.inet411.com
// based on the Delay and Pause Plugin
(function($) {
$.fn.wait = function(option, options) {
milli = 1000;
if (option && (typeof option == 'function' || isNaN(option)) ) {
options = option;
} else if (option) {
milli = option;
}
// set defaults
var defaults = {
msec: milli,
onEnd: options
},
settings = $.extend({},defaults, options);
if(typeof settings.onEnd == 'function') {
this.each(function() {
setTimeout(settings.onEnd, settings.msec);
});
return this;
} else {
return this.queue('fx',
function() {
var self = this;
setTimeout(function() { $.dequeue(self); },settings.msec);
});
}
}
})(jQuery);Sample Usage
Sample #1
default wait of 1 second:
$('#link1').wait().slideUp('fast');
Demo #1
Click the link, after ONE second (one second is default) the link will disappear.
Demo Link
1Sample #2
custom wait time of 2 seconds:
$('#link2').wait(2000).slideUp('fast');
Demo #2
Click the link, after TWO seconds the link will disappear.
Demo Link
2Sample #3
slideUp,default wait 1 second,custom function on complete to slide back down:
$('#link3').slideUp('fast').wait(function(){
$('#link3').slideDown('slow');
});
Demo #3
Click the link, the link will immediately slideUp then wait 1 second then slideDown.
Demo Link 3Sample #4
same as above except you can specify the time to wait instead of the default of 1 second.
$('#link4').slideUp('fast').wait(2000,function(){
$('#link4').slideDown('slow');
});
Demo #4
Click the link, the link will immediately slideUp then wait 2 seconds then slideDown.
Demo Link 4Sample #5
using options
$('#link5').wait({
msec:2000,
onEnd:function(){
//do something else
alert('It has been 2 seconds since you clicked the link.');
}
});
Demo #5
Click the link, wait for 2 seconds and you will receive a confirmation message.
Demo Link 5