Discussion :

[steve.ma]

Bonjour à tous,

j'utilise Jquery.countdown pour effectuer plusieurs comptes à rebours dans une même page. Le code de base utilisé pour faire fonctionner le compte à rebours est celui-ci:
(il s'affiche avec un <span>)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
 
 $('#clock01').countdown('2015/11/12 08:15:36')
    .on('update.countdown', function(event) {
         var format = '%H:%M:%S';
		 if(event.offset.minutes = 2) {
             alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
         }
         if(event.offset.days > 0) {
             format = '%-dj%!d ' + format;
         }											
         if(event.offset.weeks > 0) {
             format = '%-wsem%!w ' + format;
         }											
         $(this).html(event.strftime(format));
     })
     .on('finish.countdown', function(event) {
         $(this).parent()
             .addClass('disabled')
             .html('<strong>Terminé</strong>');
     });
</script>

Problème:
Pour afficher une dizaine de comptes à rebours, je copie un tas de fois ce code répétitif en modifiant #clock01 par #clock02, #clock03, #clock04, etc., comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script type="text/javascript">
 
 $('#clock01').countdown('2035/11/12 08:15:36')
    .on('update.countdown', function(event) {
         var format = '%H:%M:%S';
		 if(event.offset.minutes = 2) {
             alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
         }
         if(event.offset.days > 0) {
             format = '%-dj%!d ' + format;
         }											
         if(event.offset.weeks > 0) {
             format = '%-wsem%!w ' + format;
         }											
         $(this).html(event.strftime(format));
     })
     .on('finish.countdown', function(event) {
         $(this).parent()
             .addClass('disabled')
             .html('<strong>Terminé</strong>');
     });
 
 
 $('#clock02').countdown('2018/11/12 08:15:36')
    .on('update.countdown', function(event) {
         var format = '%H:%M:%S';
		 if(event.offset.minutes = 2) {
             alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
         }
         if(event.offset.days > 0) {
             format = '%-dj%!d ' + format;
         }											
         if(event.offset.weeks > 0) {
             format = '%-wsem%!w ' + format;
         }											
         $(this).html(event.strftime(format));
     })
     .on('finish.countdown', function(event) {
         $(this).parent()
             .addClass('disabled')
             .html('<strong>Terminé</strong>');
     });
 
 
 $('#clock04').countdown('2016/11/12 08:15:36')
    .on('update.countdown', function(event) {
         var format = '%H:%M:%S';
		 if(event.offset.minutes = 2) {
             alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
         }
         if(event.offset.days > 0) {
             format = '%-dj%!d ' + format;
         }											
         if(event.offset.weeks > 0) {
             format = '%-wsem%!w ' + format;
         }											
         $(this).html(event.strftime(format));
     })
     .on('finish.countdown', function(event) {
         $(this).parent()
             .addClass('disabled')
             .html('<strong>Terminé</strong>');
     });
 
 
 $('#clock05').countdown('2015/11/12 08:15:36')
    .on('update.countdown', function(event) {
         var format = '%H:%M:%S';
		 if(event.offset.minutes = 2) {
             alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
         }
         if(event.offset.days > 0) {
             format = '%-dj%!d ' + format;
         }											
         if(event.offset.weeks > 0) {
             format = '%-wsem%!w ' + format;
         }											
         $(this).html(event.strftime(format));
     })
     .on('finish.countdown', function(event) {
         $(this).parent()
             .addClass('disabled')
             .html('<strong>Terminé</strong>');
     });
</script>
 
// etc, etc...

Ca fonctionne mais bon, il y a beaucoup de codes pour faire 50fois la même chose. ^^
J'ai donc supposé qu'on pouvait réduire tout ça avec une function mais malgré de nombreux tests, mon faible niveau en JS fait que je n'y arrive pas.

Question:
Quelle fonction utiliser et comment l'appeler svp. Je suis certain que c'est un truc trop simple mais ça fait 2h que je suis dessus. ^^

.

[danielhagnoul]

Bonjour

Une fonction de rappel (callback) peut être indépendante et lorsqu'on utilise plusieurs ID commençant par les mêmes caractères on peut aussi simplifier le code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var updateCountdown = function( event ){
	var format = '%H:%M:%S';
 
	if ( event.offset.minutes = 2 ){
		alert( 'Le temps 1 est écoulé' );  	/* Affiche l'alerte */
	}
 
	 if ( event.offset.days > 0 ){
	 	format = '%-dj%!d ' + format;
	}
 
	 if ( event.offset.weeks > 0 ){
	 	format = '%-wsem%!w ' + format;
	}
 
	$( this ).html( event.strftime( format ) );
};
 
var finishCountdown = function( event ){
	$( event.target ).parent()
		.addClass( 'disabled' )
		.html( '<strong>Terminé</strong>' );
};
 
$( "[id^='clock']" ).countdown( '2015/11/12 08:15:36' )
    .on( 'update.countdown', updateCountdown )
	.on( 'finish.countdown', finishCountdown );

EDIT

Ici, la simplification $( "[id^='clock']" ) n'est pas utilisable, car chaque ID doit être initialisé avec une date différente. Sauf en utilisant un attribut "data-countdown" qui contiendrait la date de départ. C'est l'idée mise en oeuvre dans cette démonstration.

[steve.ma]

J'avais effectivement déjà vu cette méthode pour afficher plusieurs comptes à rebours mais je suis + intéressé par le code que j'utilise car plus facile pour moi pour ajouter des options.

Pour en revenir à nos moutons, mon erreur venait du fait que j'essayais d'englober tout le code dans une seule fonction (ce qui, maintenant que j'ai plus ou moins compris, me parait débile. lol), alors qu'il me fallait en faire 2. Tout de suite ça marche beaucoup mieux.

Merci beaucoup, même 1000 fois merci !!!!
Avec le temps que j'ai passé dessus sans voir la fin tu viens de me lever une super épine du pieds!

Problème résolu.