Discussion :

[ailonn]

Bonjour,

J'ai fais des recherches sur le forum et sur google mais je n'ai pas trouvé de réponse satisfaisante, du moins pour le débutant en javascript que je suis. C'est pourquoi je me tourne vers vous.

Je réalise un outil qui permet d'afficher un ensemble de marker sur une carte en utilisant l'api google map. Entre l'apparition de chaque marker il se passe un temps variable.

Les coordonnées des marker et le timestamp sont stocké dans un fichier en JSON qui est chargé dans une variable global automatiquement après le chargement de la page.

L'utilisateur clique sur un input de type bouton qui va déclencher un simple for qui va parcourir la variable et faire un setTimeout pour afficher chaque marker a l'instant où il faut.

L'utilisateur doit pouvoir arrêter la boucle en pleins milieu via un autre bouton et influencer le temps qui s'écoule entre l'affichage de deux marker via un coefficient temps saisie en input de manière dynamique.

Dans un premier temps je cherche juste la possibilité d'interrompre la boucle, pour ça je pensais utilisé un simple booléen dans la conditions du for et modifier sa valeur lorsque l'utilisateur souhaite interrompre le traitement. Le problème c'est que le changement de valeur de la variable n'est pas pris en compte dans la fonction.

J'aimerais savoir pourquoi et comment passer outre se désagrément.

Mon code js ressemble a ça :

JS

Code :

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

1
2
3
4
5
6
 
var log = new Log();
$(function init_listener()
{
$("#log").click(function(){log.logReader();});
});

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
 
Log.prototype = {
    logReader: function()
    {
        if (this.readingStart) //par défaut c'est a faux
        {
            this.readingStart = false;
            document.getElementById("log").value = "Start read logs";
            this.stopLog();
        }
        else
        {
            this.readingStart = true;
            document.getElementById("log").value = "Stop read logs";
            this.readLog();
        }
    },
 
readLog: function()
    {
//....
        for (; this.readingStart && this.currentStep < this.data.length;
             this.currentStep++) {
//....
var l = this.data[this.currentStep];
 
            this.timeoutlist.push(
                setTimeout((function(j){
                    return function(){
                        callbackMap[j.function_name](j.args, j.timestamp);}
                })(l), d_time <= d_date ? 0 : d_time));
//...
        }
//....
    }

HTML

Code :

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

1
2
 
<input id="log" type=button value="Read logs">

Excusez moi pour ce post un peu long j'ai essayé de le faire le plus explicite possible si vous avez des questions n'hésitez pas.
Merci par avance pour votre aide

[SpaceFrog]

un flag booléan modifié sur le click de ton bouton et un test dans la boucle

Code :

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

if(arret){exit() ;}

[ailonn]

C'est déjà ce que j'essaye de faire dans la condition de la boucle for avec la variable this.readingStart et ça ne fonctionne pas. Tu le verras a la ligne 22 de mon second bloc de citation de code.

[Bovino]

Tu ne peux pas interrompre une boucle avec une action utilisateur car le script ne rend la main qu'à la fin de la boucle !

La seule chose que tu puisses éventuellement faire, c'est de tester un flag dans le callback du setTimeout() pour effectuer ou non le traitement attendu.

[ailonn]

Merci Bovino.
C'est bien dommage soit dit en passant, c'est pas très propre. Je vais devoir revoir ma conception.
Merci encore et bonne continuation !