Utiliser settimeout() pour boucle while

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
zics
Messages : 2
Enregistré le : 11 janv. 2020, 15:11

Utiliser settimeout() pour boucle while

Message par zics » 11 janv. 2020, 15:35

Bonjour, je suis nouveau sur ce forum :D j'ai commencer le javascript depuis peu et je cherche désespéremment une réponse à mon problème ( comme beaucoup de gens sur les forum ahah :P )

Code : Tout sélectionner

<script
	src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>    
  <script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>




<form id="send">
	<div class="text-center">
  	<textarea name="message" id="message" class="form-control" placeholder="mail:pass" aria-label="Message" aria-describedby="basic-addon2" autocomplete="off" required></textarea>
	<br><br>
  <div>
    <button class="btn btn-primary" type="submit" name="submit">check !</button>
  </div>
</div>
</form>    	

  <div id="checkoutbad" class="text-center" style=" float:left;width:50%;border:3px solid #30C;"><H1>BAD ACCOUNT</H1></div>
  <div id="checkoutgood" class="text-center" style="margin-left:50%;border:3px solid #30C;"><H1>GOOD ACCOUNT</H1></div>

 <script>
$( "#send" ).submit(function( e ) {

	
		var valtextarea = $('#message').val();
		var valsplit = valtextarea.split("\n");
		var valsplit_number = valsplit.length;
		var k = 0;


function mafonction() {
    e.preventDefault();
    $.ajax({
		url: 'checker.php',
		type:'POST',
		async: false,
		data:
		{
			valtextarea: valsplit[k],
		},
		success: function(data)
		{
			
			var h = document.createElement('div');
			if( (data.indexOf('valide')) != (-1)){
			h.setAttribute("style", "color:green");
			var t = document.createTextNode(data);    
			h.appendChild(t);  	
			checkoutgood.insertAdjacentElement("beforeend", h);
			document.getElementById('message').value = '';
			}else{
			h.setAttribute("style", "color:red");
			var t = document.createTextNode(data);    
			h.appendChild(t);  	
			checkoutbad.insertAdjacentElement("beforeend", h);
			document.getElementById('message').value = '';
			}
		},
		error: function(msg)
		{
			$('#affiche').html('Cette requête AJAX n\'a pas abouti');
		}	
		
			});

	k++;
	}
	
	
		while((k) < (valsplit_number))
		{
			setTimeout(mafonction(), 100000);  
		}


});
</script>
Ce code permet d'envoyer une requête post en JS avec ajax à un fichier PHP, le code PHP renvoie alors suivant la requête un "valide" ou un "non" tout simplement et le JS va le récupérer et l'afficher sois dans la balise <div> avec l'id : #checkoutgood si la requête envoie "valide" et si le PHP renvoie "non" il le met dans la balise avec l'id : #checkoutbad,

ma fonction marche très bien tout se passe comme je veux mais il y a juste un bémol, la fonction peut envoyer plusieurs requêtes à chaque post, donc je boucle ma fonction, cela marche aussi, la donnée et bien renvoyé dans les balises <div> au fur et à mesure du script, mais le navigateur ne fait l'affichage de celle-ci seulement à la fin du script, il n'y a donc pas l'affichage peu à peu en temps réel dû à l'attente de fin de script du navigateur.

Après quelques recherches j'ai vu que je devais utiliser la fonction "Settimeout()" pour permettre à mon navigateur de charger le HTML pendant le chargement du script cependant le settimeout que j'ai placé ne fais pas effet peu importe l'attente que je lui mets, il ne m'affiche pas d'erreur non plus, quelqu'un pourrait-il m'expliquer comment utiliser la fonction Settimeout() sur ma fonction ?

( j'ai essayé d'expliquer au mieux mon code j'espère ne pas avoir été trop brouillon :mrgreen: )

Avatar du membre
webmaster
Administrateur du site
Messages : 126
Enregistré le : 28 févr. 2017, 15:19

Re: Utiliser settimeout() pour boucle while

Message par webmaster » 13 janv. 2020, 11:28

Bonjour,

Le paramètre async: false de l'appel ajax explique ce fonctionnement.
L'appel ajax est donc synchrone, il attend donc que la portion de script soit exécutée pour donner la main au reste du code.

En le forçant à true, cela devrait fonctionner au fil de l'eau. Mais il risque alors d'y avoir des retours dans un ordre aléatoire. Il faut en tenir compte dans les appels en envoyant un numéro d'ordre si on veut savoir sur quel retour on travail.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

zics
Messages : 2
Enregistré le : 11 janv. 2020, 15:11

Re: Utiliser settimeout() pour boucle while

Message par zics » 13 janv. 2020, 15:38

Merci infiniment ça marche super bien :o :o je ne doutais pas que c'étais cette simple ligne c'est génial :lol:

Répondre