Discussion :

[dwlapp]

Bonjour,

J'ai un soucis, mon show s’exécute à la fin une fois que toutes mes boucles sont finit.. Savez-vous pourquoi ?
J'ai enlever pas mal de code pour que ce soit plus compréhensible ne vous occupez pas des boucles c'est simplement que le show ne s'exécute pas au moment demandé.

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
       $("#popupinformation").dialog({
 
            autoOpen: false,
            width: 250,
 
            buttons: {
 
                Valider: function () { //submit
 
                        $("#progress_bar").show();
 
                        for (var parc = 0; parc < TabParc.length; parc++) {
 
                            for (var tach = 0; tach < TabTache.length; tach++) {                             
 
                                sendCommand(TabParc[parc], TabTache[tach]).done(function (data1) {});
                                sleep(750);
 
                                sendCommand2(TabParc[parc], TabTache[tach]).done(function (data2) {});
                                sleep(750);
 
                            }
 
                        }
 
                },
 
                Annuler: function () {
 
                    $(this).dialog("close");
 
                },
            }
 
        });

Merci de votre aide

[NoSmoking]

Bonjour,
de quel show parles tu, si c'est $("#progress_bar").show(), la fonction sera exécuté quand le moteur javascript aura de la disponibilité.

Ce que tu peux faire c'est mettre tes boucles dans la fonction oncomplete de show.

Code :

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

1
2
3
4
$("#progress_bar" ).show( "fast", function() {
    // fonction effectuée en fin d'animation
    // tu mets le code de tes boucles
});

[dwlapp]

Bonjour, je n'ai pas vraiment compris car cela ne fonctionne pas, j'ai toujours quand le traitement est terminé l'affichage de ma progress bar :

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
                        $("#progress_bar").show("fast", function () {
 
                            for (var parc = 0; parc < TabParc.length; parc++) {
 
                                for (var tach = 0; tach < TabTache.length; tach++) {
 
                                    sendCommand(TabParc[parc], TabTache[tach]).done(function (data1) { });
                                    sleep(750);
 
                                    sendCommand2(TabParc[parc], TabTache[tach]).done(function (data2) { });
                                    sleep(750);
 
                                }
 
                            }
 
                        });

Merci de votre aide.

[NoSmoking]

j'ai toujours quand le traitement est terminé l'affichage de ma progress bar

Ce qui paraît logique attendu que tu ne la « hide » pas !

[dwlapp]

Je me suis mal exprimé, ma progress bar débute à la fin de mes boucles et non au début.
Donc aucun changement, et oui je n'ai pas mis le hide pour le moment.

[NoSmoking]

Si je m'en réfère à la documentation tes boucles devraient se lancer une fois l'animation terminée.

• Qu'y a t-il dans ton élément « id="progress_bar" » ?
• Que font tes fonctions sendCommand ?
• Pourquoi une fonction sleep ?

[dwlapp]

La progress bar ou je fais un show pour l'afficher :

Code HTML :

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

1
2
3
4
5
6
 <div id="progress_bar" class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
    Veuillez patienter...
  </div>
</div>

Les send command déclenche de l'ajax :

Code :

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

1
2
3
4
5
        return $.ajax({
            type: 'POST',
            url: 'php/ajout_traitement_checked.php',
            data: 'Les paramètres'
        })

Et le sleep malheureusement c'est parce que si je ne les met pas, il m’exécute trop rapidement le code et donc parfois la première commande est exécutée après la deuxième.

Merci

[dwlapp]

Bonjour,
Une personne peux m'expliquer avec des mots simples pourquoi le label s'affiche après mon code "sleep" ?

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
$(function () {
 
    $('#BtnValider').click(function () {
 
        $('#label').text('Veuillez patientez...');
 
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > 5000) {
                break;
            }
        }
 
    });
 
});

[Watilin]

Salut,
avec des mots simples, ça ne va pas être évident car ça touche aux concepts internes des navigateurs.
Disons, en gros, que le navigateur a un « composant » JavaScript et un « composant » qui gère l’affichage, et que ces « composants » ne peuvent pas agir en même temps. La modification du label est prise en compte, mais l’affichage ne sera mis à jour qu’à la fin de ta fonction. Et ta boucle for retarde justement la fin de la fonction.
(Si tu es à l’aise en anglais, tu peux lire l’excellent article Rendering: repaint, reflow/relayout, restyle, en particulier la section “Browsers are smart”.)

Note : cette boucle for qui vérifie constamment la date, avec un break, est une technique qu’on appelle attente active. Elle n’est pas conseillée car elle monopolise le fil d’exécution JS principal et « gèle » l’interface utilisateur : on ne peut pas interagir avec la page tant que le fil est occupé. Dans ton cas, la page sera gelée pendant 5 secondes.
Je te propose d’utiliser setTimeout à la place.

Ce guide peut aussi t’intéresser : Gestion de la concurrence et boucle des évènements.

[dwlapp]

Je te remercie pour cette explication, je vais allez voir les liens que tu me proposes.
Du coup comment faire une progress barre si l'affichage se fait après ?

[Watilin]

Ça dépend. Tu veux que la barre représente la progression d’une seule requête ajax, ou bien il y a une donnée sur le serveur qui progresse sur un ensemble de plusieurs requêtes ?

Dans tous les cas, je vois que tu n’as rien attaché à la suite de $.ajax. Essaye .done() :

Code :

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

1
2
3
4
5
6
7
8
9
10
        return $.ajax({
            type: 'POST',
            url: 'php/ajout_traitement_checked.php',
            data: 'Les paramètres'
        })
        .done(function (data, textStatus, jqXHR) {
            console.log(data); // F12 pour voir la console
            // dans cette fonction, tu peux mettre à jour la progress bar
            // et tout ce que tu veux
        })

(Note : la signature se trouve sur la page de doc de jQuery.ajax – oui, la doc de jQuery est un peu bordélique.)

[Toufik83]

Salut,

Et le sleep malheureusement c'est parce que si je ne les met pas, il m’exécute trop rapidement le code et donc parfois la première commande est exécutée après la deuxième.

Si tu utilises la fonction sleep() (que je ne sais pas ce qu'elle contient comme code) seulement pour garder l'ordre de l'exécution de tes 2 fonctions, eh ben tu peux lancer la deuxième fonction dans le callback de la première :

Code :

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

1
2
3
4
 
sendCommand(TabParc[parc], TabTache[tach]).done(function (data1) { 
      sendCommand2(TabParc[parc], TabTache[tach]).done(function (data2) { }); 
});