Discussion :

[manoss]

Bonjour,

Je suis confronté a un pb de fuite de mémoire qui se produit à chaque appel de ma fonction ajax (jQuery) depuis un setTimeout.
Ma fonction est du style :

Code :

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

1
2
3
4
5
Function callAjax()
$ajax(){
  complete : setTimeout(callAjax), 8000);
  //déclaration de var
 //code...

J'ai limité la casse en rechargeant automatiquement la page toute les 30 minutes mais j'aimerai trouver une solution plus propre.

D'avance, merci pour votre aide

[psychadelic]

??
setTimeout(callAjax), 8000);

et de toutes façons utiliser un setTimeout dans une opération asynchrone est une mauvaise idée, surtout pour faire un appel récursif
car les interpréteurs JavaScript créent une nouvelle instance mémoire qui n'est pas faite pour s’agrandir toute seule.

Pour ce genre de problématique JavaScript offre une gestion de promesse =>https://developer.mozilla.org/fr/doc...lobaux/Promise

[manoss]

Bonjour,

Je viens de mettre en place une solution via promise de jQuery.
Mon code est maintenant de la structure suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var callAjax = $ajax({
//mes paramètres ajax
});
 
var xmlAjax = fonction(xml) 
//mon code équivalent a success
//avec en fin mon setTimeout(fonction(){ //appel de xmlAjax() }); 
 
callAjax.done(xmlAjax);

Mon setTimeout ne fonctionne pas car il rappel le traitement de mon XML mais pas la relecture du fichier qui est contenu dans la variable callAjax.

Qu'elle approche devrais-je avoir pour faire une relecture du fichier xml via Ajax sans avoir des fuites de mémoire ?

D'avance merci pour votre aide.

[NoSmoking]

Bonjour,

(...) sans avoir des fuites de mémoire ?

il serait intéressant que tu nous en dises plus sur ces « fuites de mémoire » constatées.

[psychadelic]

Bon...

Plusieurs choses :

tu aura toujours des problèmes de "fuite mémoire" en cherchant à faire des appels récursifs au travers de l'utilisation de ta fonction setTimeOut.
parce qu'en réalité tu remplis une pile d'appels interminables sur laquelle l'interpréteur ne trouve aucune fin, et au bout d'un moment il détruit cette pile et abandonne tout ce qu'il y a dedans?

si tu dois absolument lancer un processus de manière répétée sur ta page alors il faut utiliser la méthode setInterval avec son pendant clearInterval pour le stopper.

L'autre probleme que tu as, c'est que visiblement ce processus que tu appelle de manière répétée fait un appel Ajax ce qui signifie qu'entre le moment de l'appel sur vers un serveur et sa réponse, il peut se passer un temps infini, il peut même se passer que le serveur, ben y réponde pas.

Donc si entre temps un nouvel appel sur un nouveaux processus 'ajax' est lancé avant que le précédent n'ai eu sa réponse et vu que c'est forcément un processus impactant toujours les mêmes éléments de ta page ben la aussi évidement tu va trouver que t'a des "fuites mémoire" vu que les réponses vont pas arriver forcément dans le bon ordre et voir pas du tout et peuvent finir par s'accumuler dans l'attente d'autant plus que les serveurs sont aussi programmé pour refuser les même demandes incessantes ou au mieux d'allonger les délais, alors la aussi l'interpréteur JavaScript va considérer que ton code lui prend un peu trop la tête et tout jeter.

Et pour terminer la gestion des Promesses en jQuery est franchement sommaire et pas du tout adaptée à ce que tu en attend, il faut mieux en passer par la vraie gestions des promesses implémentée sur les interpréteurs tous les interpréteurs JavaScript qui pour une fois son non seulement identique et fiable sur tous les navigateurs mais plutôt bien pensée , à mon sens.

Pour terminer je me demande bien qu'elle est la finalité de ton code, parce que, vu d'ici, ça à l'air d'une usine à gaz mal fichu.

Est-ce que tu a vraiment besoin de lancer un processus répétitif? parce que c'est pas le genre de truc conseillé sur un interface HTML pour le web, sauf si tu le fait sur un serveur privé ??

[manoss]

En clair je dois pas utiliser Ajax pour ma requête.

La solution que je met en place doit fonctionner en mode navigateur kiosk sans aucune intervention humaine car il s'agit d'un panneau d'appel dont les données, provenant d'un xml, doivent être mise à jour à intervalle régulier (dans une 2ème étape dynamique).

Je pensais utiliser Ajax pour la requête afin d'obtenir un effet plus propre mais si j'ai bien compris quoique je fasse j'aurais des fuites mémoire.

[psychadelic]

En clair je dois pas utiliser Ajax pour ma requête.

heu, c'est pas tout à fait ce que j'ai écris,
s'il fallait tirer une première conclusion ce serait qu'il ne faut pas mélanger des requetes Ajax avec un setTimeout.
la seconde c'est qu'il ne faut pas faire de fonction récursive appelé avec avec un setTimeout, qu'il y ait ou non de l'Ajax dedans,
La troisième c'est que si on fait des appels à répétition avec de l'ajax il faut utiliser le système des promesses de JavaScript (et pas de jQuery car c'est pas prévu pour ça dans jQuery)

et bien sur évidement en javascript pour la répétition d'une tache cyclique il faut utiliser la méthode setInterval

mais au final, et effectivement pour un système de Kiosk autonome utilisant un simple navigateur HTML, vouloir gérer le rafraîchissement avec le JavaScript du navigateur, même s'il n'y avait pas d'appel Ajax, ça me semble pas du tout fiable.
Un navigateur n'est tout simplement pas fait pour ce genre d'usage.
Ça peut effectivement marcher en utilisant une balise meta refresh ( <meta http-equiv="refresh" content="60" /> ) mais ça aussi c'est pas fiable du tout.

Pour faire ce genre de chose je verrai plutôt une mini appli en NodeJs , et la oui, tu pourra même utiliser de l'Ajax, mais à condition de respecter les 3 conclusions précédentes) et faut aussi regarder du coté des possibilité de gestion de la mémoire proposées dans nodeJs, pour éviter tout débordement fatal, et le tout sur un Linux léger, évidement.

[NoSmoking]

... mais si j'ai bien compris quoique je fasse j'aurais des fuites mémoire

toujours pas plus d'informations sur ces fameuses « fuites de mémoire », car avec le peu de code que tu nous as fourni il est difficile de cerner où peut se situer ton soucis, qui n'est pas pour moi lié à une bonne utilisation d'Ajax.

[psychadelic]

toujours pas plus d'informations sur ces fameuses « fuites de mémoire », car avec le peu de code que tu nous as fourni il est difficile de cerner où peut se situer ton soucis, qui n'est pas pour moi lié à une bonne utilisation d'Ajax.

fait tes tests : met une requête ajax qu' s'appelle elle-même dans sa partie résolve au travers d'une fonction setTimeout et tu verra qu'au bout d'un moment le système part en couilles
et lui il appelle cela "fuite de mémoire" tout simplement parce qu'il ne trouve plus son info en retours, c'est juste qu'il comprends les choses sous cet angle.

[psychadelic]

Bon,
vu ta solution via "promise de jQuery" je crois qu'un exemple vaut milles mots.

alors j'ai écrit vite fait ce petit diaporama sur une vingtaines d'images que j'ai placé dans un répertoire appelé "images"

ce qui donne "images/0000.jpg" à "images/0020.jpg"

donc trouve toi quelques images de taille identique si possible pour pouvoir tester mon code

si tu le fait tourner en local sur ton propre poste de travail, alors il faut utiliser FireFox, car c'est le seul qui accepte de faire de l'ajax en local
(sous chrome c'est faisable, il faut juste changer un flag dans les paramètres de Chrome, mais de suite et de mémoire j'ai pas sous le coude)

donc l'idée c'est d'afficher les images une à une sur le navigateur, dans une boucle sans fin (quand il est à la dernière il repasse au début).
Chaque images chargées chassant l'autre, il n'y en a donc qu'une seule en mémoire à la fois, et elles sont chargées par une requête Ajax.

En fait j'utilise une commande fetch qui est récente sur JavaScript et qui simplifie le code, mais en fait derrière c'est une vraie requête Ajax quand même, c'est juste plus rapide à coder sans ce prendre le choux.

Si je ne me suis pas trompé, mon exemple est donc tout à fait dans la même veine de ce que tu recherche à faire.

Ce code montre comment enchaîner avec des promesses JavaScript différentes requêtes Ajax les unes à la suite des autres sans chevauchement avec un délai entre chacune (j'ai mis 3s dans mon exemple), et surtout sans créer de pile mémoire qui puisse déborder ( en principe, mais j'ai mis du jQuery parce que sa fonction delay est mieux blindée que le setTimeout).

J'ai aussi simplifié mon code en faisant l'impasse sur les cas ou une requête échouerai (promise = reject... ); tu risque de trouver cela déjà assez ardu à comprendre, surtout si tu n'a pas vu la vidéo de grafikart avant (voir lien sur mon 5em post ici)

A la limite, dans le cas d'un reject on peut imaginer que la borne renvoie un message vers le serveur pour dire qu'elle est à l'agonie

donc le code..

Code html :

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
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Diaporama basique</title>
</head>
<body>
  <h3>Diaporama basique</h3>
  <p>
    <button id="OnOff">start</button>
    <span id="refImage">...</span>
  </p>
  <p><img id="PlaceImage" src="images/0000.jpg" /></p>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
 
  $( document ).ready(function() {
    var
      ref_Image   = 0,
      NbreImages  = 21,
      tempoImages = 3000,       // miliemes de secondes soit ici 3s
      pathImages  = "images/", 
      LoopProcess = false,
      $refImage   = $('#refImage'),
      $theImage   = $('#PlaceImage')
    ;
 
    // retourne le path de la prochaine image. 
    // ici le mom des images est un chiffre allant de 0 à 20 présenté ainsi  "images/0000.jpg" à "images/0020.jpg"
    function nextImage() {
      var NoImg = (++ref_Image % NbreImages).toString();
      $refImage.html( NoImg + " / " + (NbreImages -1).toString() );
      return (pathImages + '0'.repeat(4 - NoImg.length) + NoImg + ".jpg");
    }
 
    // un Zoli bt de controle pour stopper ou relancer l'affichage.
    $("#OnOff").on('click', function () {
      LoopProcess = ($(this).html() == "start");
      $(this).html( LoopProcess ? "stop" : "start" )
      if (LoopProcess) p_infiniteLoopProcess();
    });
 
 
 
    /* ------------------------------------------------------------- *\
    |   Fonctions asynchrones, mises en promesses                     |
    |                                                                 |
    |   normalement elles devraient toute avoir un gestion de rejet   |
    |   mais il fallait bien que je vous laisse du code à faire ;)    |
    |                                                                 |
    |   return new Promise(function(resolve, reject){...              |
    \* ------------------------------------------------------------- */
    
 
 
    // affiche l'image.
    // je préfere le fetch pour cet exemple, mais ce pourrait tout aussi bien être une req Ajax
    function p_changeImage( refImage ) {
      return new Promise(function(resolve){
        fetch(refImage)
        .then(function( resp ) { return resp.blob(); })
        .then(function( myBlob ) {
          var objectURL = URL.createObjectURL(myBlob);
 
          $theImage.fadeOut(800, function() {
            $(this)
            .attr('src', objectURL)
            .fadeIn(800)
            .delay(tempoImages)
            .queue(function(next) {
              resolve(0);
              next();
            });        
 
          });
        });     
      });     
    }
 
    // la boucle sans fin pour afficher les images
    function p_infiniteLoopProcess (){
      return p_changeImage( nextImage() )
      .then(function( resp ){
        return new Promise(function(resolve){
          if( LoopProcess ) {
            return resolve( p_infiniteLoopProcess() );
          }else{
            resolve();
          }
        });
      });
    }
 
  });
  </script>
</body>
</html>

[manoss]

Merci psychadelic pour le partage de ton code.
Je vais l’adapter a mon besoin.

Encore merci

[NoSmoking]

fait tes tests : met une requête ajax qu' s'appelle elle-même dans sa partie résolve au travers d'une fonction setTimeout et tu verra qu'au bout d'un moment le système part en couilles

j'ai des milliers heures de test, et pas moi seulement, avec « une bonne utilisation d'Ajax » comme dit plus haut.

(sous chrome c'est faisable, il faut juste changer un flag dans les paramètres de Chrome, mais de suite et de mémoire j'ai pas sous le coude)

voilà ce que j’appelle une « fuite de mémoire », dont je suis également de plus en plus atteint, tu as fourni cette information il y a peu (le 14/03/2018, 14h22)

De toute façons, c'est aussi faisable avec Chrome, c'est juste une option à activer :

C:\Program Files (x86)\Google\Chrome\Application\Chrome.exe" --allow-file-access-from-files

[psychadelic]

jvoilà ce que j’appelle une « fuite de mémoire », dont je suis également de plus en plus atteint, tu as fourni cette information il y a peu (le 14/03/2018, 14h22)

J'ai codé ça pendant mes heures d'insomnies, alors retrouver ce post n'était pas ma priorité

[manoss]

désolé noSmoking,

J'appel fuite de mémoire car j'observe que sur la durée, la mémoire ne fait qu'augmenter jusqu'a faire planté mon navigateur. Je développe sous rapsberry et donc chromium.
La finalité est un usage industriel et ce genre de comportement est inacceptable donc je cherche à optimiser l'usage mémoire.

[psychadelic]

je développe sous rapsberry et donc chromium.
La finalité est un usage industriel et ce genre de comportement est inacceptable donc je cherche à optimiser l'usage mémoire.

[je pense que comme] nodeJs fonctionne sur rapsberry, ça devrai te permettre d'économiser plus sur la mémoire qu'avec chromium ??

[manoss]

En effet une solution nodeJs/Electron m'attire

[psychadelic]

Histoire de simplifier le code précédent, mais pas supporté par tous les navigateurs :

Code JavaScript :

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

1
2
3
4
5
6
    // la boucle sans fin pour afficher les images
    async function p_infiniteLoopProcess() {
      while (LoopProcess ) {
        await p_changeImage( nextImage() );
      }
    }

Histoire aussi de laisser aussi un code un peu plus simple.

[manoss]

Bonjour,

J'ai essayé plusieurs approches mais rien ne semble y faire :
ci-dessous mon code actuel :

L'idée est d'appeler cette fonction ajax toutes les X minutes sans avoir de fuite mémoire.

Code html :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<body>
	<div class="zone">
		<table class="orientation" id="page_1">
			<tr>
				<td id="orientation_1"> </td>
				<td id="orientation_2"> </td>
			</tr>
			<tr>
				<td id="orientation_3"> </td>
				<td id="orientation_4"> </td>
			</tr>
			<tr>
				<td id="orientation_5"> </td>
				<td id="orientation_6"> </td>
			</tr>
		</table>
	</div>
	<div class="messagemarquee">
		<ul class="message">
		</ul>
	</div>
 
	<script type="text/javascript" src="js/jquery.js"></script>
	<script>
        $(document).ready(
               function()
                {
                        nbreload = 0;
                        $('.zone').delay(8000).fadeIn('slow');
                        //setTimeout(callAjax, 8000);                   
                        setTimeout(function(){window.location.reload(true)}, 15000);
                        //this.remove("ajaxCall()");
                        //infiniteLoop();
                        callAjax();
                        appelPages();
        /*              
                function infiniteLoop(){
                        while (true) {
                                $('.zone').delay(8000).fadeOut(1000);
                                callAjax();
                        
                        }               
                }*/
        });
 
        function callAjax() {
                 $.ajax({
                        type: "GET",
                        url: "xml/test.xml",
                        dataType: "xml",
                        cache: false,
                        success : function(xml)
                        {
                                $(xml).find('panneaux').each(
                                function()
                                {
                                        $(this).find('page').each(
                                        function()
                                        {
                                                //var contenu = "";
                                                var prioritaire = $(this).find('prioritaire').text();
                                                var ordre = $(this).find('ordre').text().replace(/\s/g,'');
                                                var fxvitesse = $(this).find('fxvitesse').text();
                                                var pause = $(this).find('pause').text;
                                                var defilementvitesse = $(this).find('defilementvitesse').text();
                                                //contenu = $(this).find('contenu').text();
                                                console.log(ordre);
                                                if (ordre == 1) 
                                                {
                                                        var indexorientation = 1;
                                                        $(this).find('page > orientations > orientation').each(
                                                        function()
                                                        {
                                                                var immatriculation = $(this).find('immatriculation').text();
                                                                var quai = $(this).find('quai').text();
                                                                var libelleorientation = immatriculation + " - " + quai;        
                                                                var tdorientation = "#orientation_"+indexorientation;
                                                                
                                                                //efface les précédentes valeurs affichées 
                                                                $(tdorientation).empty();
                                                                
                                                                //affiche les nouvelles valeurs
                                                                $(tdorientation).append(libelleorientation);
                                                                immatriculation = null;
                                                                quai = null;
                                                                libelleorientation = null;
                                                                tdorientation = null;
                                                                indexorientation = indexorientation+1;
                                                        });
                                                        
                                                        /*
                                                        $('.page').empty();
                                                        contenu = contenu.replace(/p>/gi,"li>");                                
                                                        $('.page').html(contenu).appendTo('.page').fadeIn('slow');*/
                                                } else {
                                                        
                                                        $('.messagemarquee').empty();
                                                        var message = $(this).find('message').text();
                                                        //contenu = contenu.replace(/p>/gi,"li");                               
                                                        $('.messagemarquee').html(message);
                                                        
                                                }
                                                prioritaire = null;
                                                ordre = null;
                                                fxvitesse = null;
                                                pause = null;
                                                defilementvitesse = null;
                                                message = null;
                                        });
                                });       
                                $('.zone').fadeIn();                            console.log("success");         
                                //ajaxCall();   
                        },//success
                        error : function(res){
                                console.log(res);
                        }
                });//Ajax
                //});//resolve(resp);
        };//function

[psychadelic]

c'est vexant...
Déjà j'ai expliqué plus haut que les fonctions jQuery ne traitaient pas les promeses correctement (parce qu'elles fonctionnent sur un système de call back)
plus le fait d'avoir écrit plus haut tout le mal que je pensais de la fonction setTimeout et qui de plus ne respecte pas toujours le délai qu'on lui demande..
(ou alors faudrait m'expliquer pourquoi le fonction delay de jQuery, si elle se base bien sur un setTimeout vérifie que le temps écoulé correspond, et si il est inféreur relance un nouveau setTimeout...)

Bref, t'a fait tout le contraire, et en plus il n'y plus aucune gestion de promesse dans ton exemple...

Code html :

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
    <p><button id="OnOff">start</button></p>
 
    <p id="message">...</p>
 
 
  <script src="jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      
      var
      refFileXML = -1,                           // pour ficdata_0.xml, ficdata_1.xml et ficdata_2.xml
      $message = $('#message'),
      LoopProcess = false;
 
      p_infiniteLoopProcess();
 
      $("#OnOff").on('click', function () {
        LoopProcess = ($(this).html() == "start");
        $(this).html( LoopProcess ? "stop" : "start" )
        if (LoopProcess) p_infiniteLoopProcess();
      });
 
      async function p_infiniteLoopProcess() {
        while (LoopProcess ) {
          await p_AsyncFunction( 'ficdata_'+ (++refFileXML % 3)+'.xml' );
          await p_attente_3s();
        }
      }
 
      function p_attente_3s( ) {
        return new Promise(function(resolve){
          $message                      // Il faut à tout prix un os à ronger pour la fct delay
          .data("trace", refFileXML )  // on peut aussi profiter de l'occase pour laisser une trace utile
          .delay(3000)
          .queue(function(next) {
            resolve();
            next();
          });        
        });
      }
 
 
      function p_AsyncFunction(url) {
        return new Promise(function (resolve, reject) {
 
          var xhr = new XMLHttpRequest();
 
          xhr.open("GET", url+"?nocache=" + Math.random(), true); 
 
          xhr.responseType = 'document';
          xhr.overrideMimeType('text/xml');
 
          xhr.onload = function () {
 
            $(xhr.responseXML).find('Titi').each( function () {
              $message.text( $(this).text() );
            });
 
            // mettre ici tout ton traitement du fichier XML....
 
            return resolve();
          };
          xhr.onerror = function () {
            return reject(xhr.statusText);
          };
          xhr.send(null);
 
        }); /// return new Promise
      } ///  p_AsyncFunction(url)
 
    }); /// jquery(document).ready
  </script>
</body>
</html>

[NoSmoking]

Pour ma part je maintiens que c'est une mauvaise utilisation d'Ajax, je ne vois pas de demande client au serveur ce qui est quand même la base de l'utilisation d'Ajax où c'est le client qui demande la mise à jour.

Il existe bien d'autres techniques pour ce genre de chose, le « long polling », les « WebSockets » ou encore, et cela tombe bien attendu que tu utilises Chrome, les « server-sent events ».