Bloquer des événement pendant 2 Seconde
adamsong
-
adamsong -
adamsong -
Bonjour
je suis novice en JavaScript et cherche a bloquer des événements pendant 2 Seconde. je vous explique :-) .
j'ai une petite fonction qui me change les classes de certaines de mes Divs et qui les remet a l'état d'origine 2 seconde après (cela me permet de faire des animation CSS)
mon problème et que ci l'utilisateur clique trop vite sur mes 2 événement l'animation que j'ai mi en place saute, donc je voudrai bloquer les Événements le temps que mon animation se termine
voici mon script
Désolé pour la longueur du code mais je ne savais pas quoi enlever pour faire plus court.
merci d'avance pour votre aide.
je suis novice en JavaScript et cherche a bloquer des événements pendant 2 Seconde. je vous explique :-) .
j'ai une petite fonction qui me change les classes de certaines de mes Divs et qui les remet a l'état d'origine 2 seconde après (cela me permet de faire des animation CSS)
mon problème et que ci l'utilisateur clique trop vite sur mes 2 événement l'animation que j'ai mi en place saute, donc je voudrai bloquer les Événements le temps que mon animation se termine
voici mon script
// declaration de variable avec appel des Div grace a l'ID
var clickon_R = document.getElementById('right_fl'),
clickon = document.getElementById('left_fl'),
link_hiddenL = document.getElementById('link_hiddenL'),
link_1 = document.getElementById('link_1'),
link_2 = document.getElementById('link_2'),
link_3 = document.getElementById('link_3'),
link_4 = document.getElementById('link_4'),
link_5 = document.getElementById('link_5'),
obr_hiddenL = document.getElementById('obr_hiddenL'),
obr_1 = document.getElementById('obr_1'),
obr_2 = document.getElementById('obr_2'),
obr_3 = document.getElementById('obr_3'),
obr_4 = document.getElementById('obr_4'),
obr_5 = document.getElementById('obr_5');
//fonction pour remetre a Zero les Class
function reset_class(){ link_hiddenL.className="";
link_1.className="link_1";
link_2.className="link_2";
link_3.className="link_3";
link_4.className="link_4";
link_5.className="link_5";
obr_hiddenL.className="";
obr_1.className="obr_1";
obr_2.className="obr_2";
obr_3.className="obr_3";
obr_4.className="obr_4";
obr_5.className="obr_5";}
// Fonction pour animation vers la gauche
var class_remplace = function() {
//modification des Class pour l'animation
link_hiddenL.className="link_hiddenLL";
link_1.className="link_animeL1L";
link_2.className="link_animeL2L";
link_3.className="link_animeCL";
link_4.className="link_animeR2L";
link_5.className="link_animeR1L";
obr_hiddenL.className="obr_hiddenL";
obr_1.className="obr_animeL1L";
obr_2.className="obr_animeL2L";
obr_3.className="obr_animeCL";
obr_4.className="obr_animeR2L";
obr_5.className="obr_animeR1L";
//fonction pour remetre a Zero les Class
setTimeout('reset_class()',2000)};
// fonction pour animation vers la droite
var class_remplaceR = function() {
//modification des Class pour l'animation
link_hiddenL.className="link_hiddenLR";
link_1.className="link_animeL1R";
link_2.className="link_animeL2R";
link_3.className="link_animeCR";
link_4.className="link_animeR2R";
link_5.className="link_animeR1R";
obr_hiddenL.className="obr_hiddenR";
obr_1.className="obr_animeL1R";
obr_2.className="obr_animeL2R";
obr_3.className="obr_animeCR";
obr_4.className="obr_animeR2R";
obr_5.className="obr_animeR1R";
// remise a zero des Class
setTimeout('reset_class()',2000);
};
//evenement vers la gauche
clickon.addEventListener('click', class_remplace , false);
//evenement vers la droite
clickon_R.addEventListener('click', class_remplaceR , false);
Désolé pour la longueur du code mais je ne savais pas quoi enlever pour faire plus court.
merci d'avance pour votre aide.
A voir également:
- Bloquer des événement pendant 2 Seconde
- Supercopier 2 - Télécharger - Gestion de fichiers
- Bloquer pub youtube - Accueil - Streaming
- Bloquer des cellules excel - Guide
- Bloquer sur messenger - Guide
- 2 ecran pc - Guide
2 réponses
Salut,
Tu pourrais utiliser un simple booléen indiquant si l'animation est en cours ou non, et vérifier ce booléen avant de modifier tes classes.
Par exemple, tu déclare ton booléen au début de ton code afin qu'il soit utilisable partout :
Puis dans ta fonction d'animation class_remplace tu vérifie si l'animation est en cours, si oui -> on ne fait, si non -> on la lance et on passe le booléen à vrai :
Une fois que ton animation est finie, tu remet le booléen à faux. Dans ton code, la fin de l'animation correspond à ta fonction reset_class :
Le code est à vérifié, je te lance juste l'idée comme ca.
Sinon, je te conseil de regarder le framework jQuery et notamment sa fonction animate qui pourra te rendre les choses bien plus facile :
http://api.jquery.com/animate/
Les exemples en bas de page sont parlant.
Bon courage
Tu pourrais utiliser un simple booléen indiquant si l'animation est en cours ou non, et vérifier ce booléen avant de modifier tes classes.
Par exemple, tu déclare ton booléen au début de ton code afin qu'il soit utilisable partout :
var animate = false;
Puis dans ta fonction d'animation class_remplace tu vérifie si l'animation est en cours, si oui -> on ne fait, si non -> on la lance et on passe le booléen à vrai :
var class_remplaceR = function() {
if (animate) {
return;
} else {
animate = true;
[... code de l'animation ...]
}
Une fois que ton animation est finie, tu remet le booléen à faux. Dans ton code, la fin de l'animation correspond à ta fonction reset_class :
function reset_class() {
[... code du reset ...]
animate = false;
}
Le code est à vérifié, je te lance juste l'idée comme ca.
Sinon, je te conseil de regarder le framework jQuery et notamment sa fonction animate qui pourra te rendre les choses bien plus facile :
http://api.jquery.com/animate/
Les exemples en bas de page sont parlant.
Bon courage