Utiliser settimeout() pour boucle while
Posté : 11 janv. 2020, 15:35
Bonjour, je suis nouveau sur ce forum 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 )
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 )
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>
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 )