Arrêter function setInterval

Version imprimable

Bonjour à tous,
Je suis en train de faire joujou avec jQuery à partir d'un tuto que j'ai trouvé:
http://www.css3create.com/Barre-de-p...HTML5-progress

C'est une barre de chargement en CSS+jQuery.

Mais je n'arrive pas à arrêter le setInterval lorsque le chargement est à 100%.

Voici le code que j'ai modifié (mais qui ne marche pas):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(document).ready(function(){ function modifValues(){ var val = $('#progress progress').attr('value'); if(val>=100){return true;} else { var newVal = val*1+0.25; var txt = Math.floor(newVal)+'%'; $('#progress progress').attr('value',newVal).text(txt); $('#progress strong').html(txt); } } var tend = setInterval(function(){ modifValues(); },40); if(tend == true) { alert('true'); } });
Ici lorsque la valeur atteint 100% je devrai avoir un alert mais il ne se passe rien.
Si quelqu'un pouvait m'éclairer là-dessus se serait gentil.

Merci d'avance !

19/04/2013, 11h25
Bovino

Tout d'abord, puisque ta fonction de rappel ne demande pas d'arguments, tu peux écrire plus simplement

Code:

var tend = setInterval(modifValues,40);

Sinon, pour ta question :

Code:

clearInterval(tend);
19/04/2013, 11h37
Friksstyle

Je te remercie de ta réponse Bovino, je ne connaissais pas (encore) clearinterval.

Cependant j'ai toujours un soucis avec cette fonction.
Dans la théorie lorsque "val" atteint 100, ma fonction doit retourner "true".
Et lors de mon test si "tend" vaut true alors je place mon clearInterval.
Mais bizarrement la condition ne s'effectue pas...
As-tu une idée là-dessus?

EDIT: en procédant avec un alert de mon "tend" je m'aperçois qu'il vaut "2".
Chose étrange car il devrait me retourner un true ou un false (que j'ai placé dans mon else pendant mon test)
19/04/2013, 11h47
Bovino

tend est l'identifiant lié au setInterval, il ne vaut donc pas true mais une valeur numérique fixe.
Ensuite, c'est dans la fonction de rappel qu'il faut faire le clearInterval() si tu as atteins 100.

Effectivement, je ne savais pas que setInterval donnait un ID.
Je sais que je dévie du sujet de base mais mon problème subsiste toujours.
Lorsque val atteint la valeur 100 je mets mon clearInterval(tend).
Au passage dans ma fonction je retourne un true pour faire un test. Mais bizarrement ce true ne vient jamais.
Saurais-tu pourquoi?

Voici le code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(document).ready(function(){ function modifValues(){ var val = $('#progress progress').attr('value'); if(val>=100){clearInterval(tend);return true;} else { var newVal = val*1+0.25; var txt = Math.floor(newVal)+'%'; $('#progress progress').attr('value',newVal).text(txt); $('#progress strong').html(txt); } } var tend = setInterval(function(){ modifValues },40); var test = modifValues(); if(test == true) { alert('true'); } });

19/04/2013, 15h14
NoSmoking

Bonjour,

Citation:

Envoyé par Friksstyle

Au passage dans ma fonction je retourne un true pour faire un test. Mais bizarrement ce true ne vient jamais.

comment peux tu en être sûr?
19/04/2013, 16h04
Friksstyle

Ben théoriquement parce que je met return true;.
Mais pour preuve que je ne le retourne pas puisque cela ne marche pas. ^^
19/04/2013, 16h11
Bovino

Tu sembles ne pas comprendre ce qu'est une fonction de rappel.

Dans ton exemple, la seule fois où tu utilises la valeur retournée par ta fonction, c'est quand tu fais

Code:

var test = modifValues();

mais à ce moment, val ne vaut pas 100 et dans ce cas, tu ne renvoies rien ! :aie:

Dans tous les autres appels, c'est setInterval qui déclenche la fonction et dans ce cas, tu ne peux pas récupérer la valeur retournée...
19/04/2013, 16h32
Friksstyle
D'accord je "comprends" ce que tu veux dire.
Effectivement lorsque je fais var test = modifValues(); c'est au moment où la page est chargée et bien sûr val ne vaut pas 100 à ce moment là.

Mais là où j'ai du mal à saisir la subtilité de la chose c'est pour récupérer mon true en dehors de ma fonction.
J'ai bien assimilé que c'était setInverval qui déclenchait ma fonction et que lui assigner une variable tend ne me donnait pas mon booléen mais un id.
Et je me sers de cet id pour stop mon setInterval lorsque ma valeur atteint 100.

Au final je me perds à chercher comment récupérer mon booléen en dehors de la fonction lorsque ma valeur vaut 100.
Comment dois-je procéder?

EDIT:
J'ai modifié mon setIntverval de cette manière:
Code:

1 2 3 4 5 6 7 8 var tend = setInterval(function(){ modifValues(); var test = modifValues(); if(test == true) { alert('oui'); } },40);
Mais cette fois c'est mon alert qui boucle. ^^'
19/04/2013, 16h41
Bovino

Tu ne peux pas... une fonction de rappel n'a aucune fonction à qui renvoyer un résultat.
Donc au lieu de faire un return, tu peux aussi bien appeler une autre fonction pour traiter les différents cas.
19/04/2013, 16h47
Friksstyle

Citation:

Envoyé par Bovino

Donc au lieu de faire un return, tu peux aussi bien appeler une autre fonction pour traiter les différents cas.

Tu voudrais donc que je continue mes actions, scripts dans ma fonction modifValues ?
C'est ce que je voulais éviter justement.
Mais si il n'y a pas d'autres choix que celui-ci je l'accepte (à contre cœur).

Je ne vois pas trop en quoi cela peut te déranger à ce point

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function modifValues() {
  var val = $('#progress progress').attr('value');
  if (val >= 100) {
    clearInterval(tend);
    // ICI les actions à mener si la valeur est atteinte
  } else {
    var newVal = val * 1 + 0.25;
    var txt = Math.floor(newVal) + '%';
    $('#progress progress').attr('value', newVal).text(txt);
    $('#progress strong').html(txt);
  }
}

ou encore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function modifValues() {
  var val = $('#progress progress').attr('value');
  if (val >= 100) {
    clearInterval(tend);
    fctCallBack(); // ICI appel de la fonction à éxécuter
  } else {
    var newVal = val * 1 + 0.25;
    var txt = Math.floor(newVal) + '%';
    $('#progress progress').attr('value', newVal).text(txt);
    $('#progress strong').html(txt);
  }
}

cela reste du classique

19/04/2013, 18h39
Friksstyle

Disons qu'il va y en avoir des tonnes, c'est pour ça.
Et je n'ai pas trop des fonctions dans des fonction dans des fonctions, ....... :)
Je mets tout de même le Topic en résolu.

Merci à vous ! :)