Loop javascript

Question

none61

23 Oct 2016 à 21:48

Bonjour,

Etant novice en la matière,je travail actuellement sur un "mini site" et j'aimerais savoir comment vous faite pour qu'un code javascript s'execute en boucle?

Je precise que lorsque je lance ma page, le code est fonctionnel.

Je vous post le code en question


<!--                                    script js pour reactualiser les id                              -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">

        function mafonction() {

                        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                                xmlhttp = new XMLHttpRequest();
                        } else {// code for IE6, IE5
                                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xmlhttp.open("GET", "http://192.168.1.16/dlprogressbar/testj.xml", false);
                        xmlhttp.send();
                        xmlDoc = xmlhttp.responseXML;
                        document.write("<table border='1'>");
                        var x = xmlDoc.getElementsByTagName("valeur");
                        for ( i = 0; i < x.length; i++) {
                                var value = (x[i].getElementsByTagName("pourcent")[0].childNodes[0].nodeValue);
                                }
                                document.write("</table>");


                if (value == 0){
                        $('#callback').load('http://monip/value0.html').fadeIn("slow");
                        } else if ((value >= 1)&&(value <= 99)){
                        $('#callback').load('http://monip/value.html').fadeIn("slow");
                } else {
                        $('#callback').load('http://monip/value100.html').fadeIn("slow");
                        }
 
}
mafonction();

</script>

J'ai essayé tout un tas de manière mais aucune ne fonctionne...

Merci a vous Smiley cligne

[/i]
Modifié par none61 (23 Oct 2016 - 21:54)

faboard

23 Oct 2016 à 22:45

salut

Il faut utiliser cette fonction :

setTimeout(function, 60000);

function : le nom de ta fonction
60000 temps en ms -> 60 s

ta fonction sera exécuté toutes les minutes

none61

24 Oct 2016 à 09:34

Bonjour et merci pour ta réponse,

J'ai déjà essayé ce que tu me dis mais ça ne fonctionne pas...

En effet ma page s'affiche bien, et dés que setimeout agit, la page devient blanche avec une petite barre noire tout en haut a gauche....

Je ne comprend vraiment pas pourquoi...

Zelena

24 Oct 2016 à 10:11

Bonjour.

C'est plutôt setInterval qui déclenche une fonction à intervalles réguliers... non que ça change grand chose pour votre problème... si ça ne fonctionne pas au moins une fois.

Je vois peu d'initialisation de variables...

Pour débuguer, je ne vois pas d'autre solution que de suivre la valeur des variables au moment de l'exécution du script.

Smiley smile

none61

24 Oct 2016 à 10:27

Bonjour Zelena, merci pour ta réponse,

Ce que je ne comprend pas, c'est que si je ne met pas setTimout ou autre, lorsque j'appel ma page, mon script fonctionne bien.

Si je modifie la valeur de "value" et que je rafraichis ma page manuellement, mon script parse bien le fichier testj.xml et me redirige bien vers la page souhaité...

Si le problème venait de mon script(ce qui est fort possible ^^) ça ne devrait pas fonctionner du tout??

none61

24 Oct 2016 à 10:42

Dans le doute de faire les choses correctement, je vous reposte ma page comptète :


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

<!--                     ceci sert a afficher le contenu de la page décidé dans le javasript                     -->
<div id="callback">
</div>

        <script src="main.js"></script>
    </body>
</html>

<!--ceci est le css pour afficher le fond d'écran-->
<style>
body {
background-image: url(http://192.168.1.16/newsite/photos/background.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

<!--                                    script js pour reactualiser les id                              -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">

        function mafonction() {
                        //sert a parser
                        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                                xmlhttp = new XMLHttpRequest();
                        } else {// code for IE6, IE5
                                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xmlhttp.open("GET", "http://192.168.1.16/dlprogressbar/testj.xml", false);
                        xmlhttp.send();
                        xmlDoc = xmlhttp.responseXML;
                        var x = xmlDoc.getElementsByTagName("valeur");
                        for ( i = 0; i < x.length; i++) {
                                var value = (x[i].getElementsByTagName("pourcent")[0].childNodes[0].nodeValue);
                                }
                // sert a comparer la valeur de value pour attribuer a l'ID callback le contenue de la page souhaité
                if (value == 0){
                        $('#callback').load('http://192.168.1.16/dlprogressbar/value0.html').fadeIn("slow");
                        } else if ((value >= 1)&&(value <= 99)){
                        $('#callback').load('http://192.168.1.16/dlprogressbar/value.html').fadeIn("slow");
                } else {
                        $('#callback').load('http://192.168.1.16/dlprogressbar/value100.html').fadeIn("slow");
                        }
 
}
//sert a appeler ma fonction lors de l'ouverture de la page
mafonction();   

setInterval(mafunction, 1000);
</script>

[/i]
Modifié par none61 (24 Oct 2016 - 10:46)

faboard

24 Oct 2016 à 11:17

Zelena a écrit :
Bonjour.

C'est plutôt setInterval qui déclenche une fonction à intervalles réguliers... non que ça change grand chose pour votre problème... si ça ne fonctionne pas au moins une fois.

Je vois peu d'initialisation de variables...

Pour débuguer, je ne vois pas d'autre solution que de suivre la valeur des variables au moment de l'exécution du script.

ha oui, répondu trop vite Smiley ravi

Je penses que le probleme vient du document.write(), il faut utiliser innerHTML ou html() text() de jquery pour ecrire dans ton html.

none61

24 Oct 2016 à 11:34

J'ai enlevé les "document.write", ce ne sont pas eux qui me servaient a afficher mes pages... ils était resté suite a de nombreux test....

Mon script se compose en deux partie.

Une partie qui parse un fichier tesj.xml et en récupère une valeur comprise entre 0 et 100 suivant l'état de mon téléchargement.Le contenu du fichier est implémenté a la variable "value"

Et la deuxième partie, c'est just un "if" "if else" "else" qui regarde la valeur de "value" et suivant ce qu'elle contient va donner le contenue de la page qui correspond a l'ID "callback".

Ce que je ne comprend pas non plus, c'est que comme on peut le voir ma page contient un fond d'écran. Lorsque j'appel ma page manuellement tout est ok.

Mais lorsque je met setInterval, non seulement mon script ne fonctionne plus mais en plus mon for d'écran saute...

none61

24 Oct 2016 à 11:40

Pour info:

Le but de ces pages est de me créer une interface graphique afin de rapatrier des données d'un serveur Linux à un autre .

Quelques informations comme le pourcentage de place restant sur le serveur l'état d'avancement du fichier en cour, du global ainsi que le nom seront affichés (autre idées bienvenue Smiley cligne

....

Un fichier bash fera le travail de transfère et remplira les fichiers contenant les état d'avancement...

L'ensemble sera affiché sur une tablette a travers l'application "imperihome".

Au début et surtout pour la fin du téléchargement,la tablette parlera afin de nous prévenir.

Elle sortira de veille pour afficher automatiquement la page du "site".

L'ensemble est stocké sur un raspbery au travers d'un serveur apache.

Loin d'être terminé, si ça intéresse des personnes, je peux partager mon travail... Smiley cligne

Voila

Zelena

24 Oct 2016 à 12:51

mafonction() fonctionne.

Mais pas setInterval(mafunction, 1000)

mafunction existe-t-elle ? Serait-ce aussi simple ?

Smiley smile

none61

24 Oct 2016 à 13:13

huummm.... tu me perds un peu

Si mafonction () fonctionne, c'est qu'elle existe nan?

Ou peut être que j'utilise mal setTimeout... ?

Zelalsan

24 Oct 2016 à 13:22

salut,
il faudrait déjà attendre que l'état de la requête Ajax change et que son statut soit correct avant de récupérer la réponse XML.

Il faudrait ensuite nous dire ce qu'attend la variable value. Si c'est une valeur unique, la boucle est dans ce cas inutile. Si au contraire il y a plusieurs valeurs à récupérer alors les conditions qui suivent doivent être incluses à l'intérieur de la boucle.

Quant à l'appel en boucle de ta fonction, il doit se faire après que la requête eut été correctement effectuée et que le traitement réalisé. Tu utiliseras dans cas un setTimeout qui appellera à nouveau ta fonction après un certain délai.
Il faudrait aussi bien choisir le délai. Je ne sais si 1 seconde est correct voir même utile.

Mais ton code pourrait ressembler à ça :


function mafonction() {

	xhr.onreadystatechange = function(){

		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {

			var x = xhr.responseXML.getElementsByTagName("valeur"),
				i = 0,
				l = x.length,
				value;
			
			for (; i<l; i++){
				
				value = (x[i].getElementsByTagName("pourcent")[0].childNodes[0].nodeValue);

				// sert a comparer la valeur de value pour attribuer a l'ID callback le contenue de la page souhaité
				if (value == 0){
					$('#callback').load('http://192.168.1.16/dlprogressbar/value0.html').fadeIn("slow");
				} else if (value >= 1 && value <= 99){
					$('#callback').load('http://192.168.1.16/dlprogressbar/value.html').fadeIn("slow");
				} else {
					$('#callback').load('http://192.168.1.16/dlprogressbar/value100.html').fadeIn("slow");
				}
			
			}

			setTimeout(mafunction, 1000);

		}

	}

	xhr.open("GET", "http://192.168.1.16/dlprogressbar/testj.xml", true);
	xhr.send();

}

var xhr = new XMLHttpRequest();

//sert a appeler ma fonction lors de l'ouverture de la page
mafonction();

Au passage, pas la peine de te soucier des vieux IE avec l'objet ActiveX et je ne sais pas non plus pourquoi tu utilises les requêtes de manière synchrones ?[/i]

Zelalsan

24 Oct 2016 à 13:22

Oups doublon
Modifié par Zelalsan (24 Oct 2016 - 13:23)

none61

24 Oct 2016 à 13:59

Merci pour ta réponse Zelasan,

Alors je vais essayer de te répondre ^^

Donc la variable value attend un chiffre entre 0 et 100

0 = pas de téléchargement
1 et 99 = téléchargement en cour
100 = téléchargement fini

c'est le script bash qui s'occupe du téléchargement qui écris dans le fichier xml

J'ai donc du coup 3 pages html différente :

value0.html => m'affiche qu'aucun téléchargement n'est encoure et me propse un bouton a cliquer pour lancer celui-ci

valu.html => m'affiche une page contenant Deux progressbar afin de voir l'avancement du fichier en cour de téléchargement ainsi que la progression total des téléchargements

value100.html => m'affiche que le téléchargement est terminer et me propose un bouton home pour revenir a la première page.

En ce qui concerne les requêtes synchrone:

étant vraiment novice en javascript, j'ai réussi a écrit la partie if else... sans problème mais pour parser mon fichier xml j'ai trouvais un bout de code sur la toile que j'ai simplement copier/coller...

j'essais de comprendre comment cela fonctionne dans la mesure du possible mais vu le nombre de ligne pour just parser un fichier... Smiley bawling

Zelena

24 Oct 2016 à 14:09

none61 a écrit :
huummm.... tu me perds un peu

Si mafonction () fonctionne, c'est qu'elle existe nan?

Ou peut être que j'utilise mal setTimeout... ?

mafonction existe peut-être mais mafunction ?

none61

24 Oct 2016 à 14:13

j'ai du coup testé ton script,

Donc il m'affiche bien la page souhaitée en fonction de la valeur de "value" mais je suis obligé de rafraichir la page manuellement ...

none61

24 Oct 2016 à 14:29

Zelena a écrit :

mafonction existe peut-être mais mafunction ?

j'ai vu..erreur de frappe Smiley cligne

du coup certaines choses commence a fonctionner grace au script de [quote=Zelalsan] Smiley biggrin

je vais modifier mes pages "value" car certaines choses ne s'affichent pas comme je le pensais...

Par contre le setTimeout créé un "clignotement" de l'affichage...est-ce normal ?

none61

25 Oct 2016 à 19:05

Bpnsoir,

Je me permet de revenir vers vous concernant la réactualisation de ma page index.html..

Donc lorsque je change la valeur de testj.xml la page change bien suivant la valeur mais parcontre si je change le contenu d'une des pages value0.html value.html value100.html , la page rest inchangée...

J'ai même été jusqu'a supprimer l'url des fichier value pour faire des tests et ils s'affichent toujours...

Je ne comprend pas pourquoi Smiley biggol

none61

25 Oct 2016 à 20:50

Pas sur que ça soit ça mais ça a l'air d'être mieux avec cette ligne:

<meta http-equiv="cache-control" content="no-cache">

Smiley clapclap

Sujet clos

Questions générales et questions de débutants

Loop javascript