Suspendre instruction JS
Résolu
Bonjour,
ma question est simple, je me demande si il existe en Javascript une fonction ou un truc special qui me permetterais de mettre un certain temp avant de passer a l'instruction suivante !!
Exemple : J'affiche une icone de preloading, mais sa ne dure pas trop, même pas 100ms, comment faire pour le faire duré plus longtemps avant de passer a l'instruction suivante !!
Merci !
ma question est simple, je me demande si il existe en Javascript une fonction ou un truc special qui me permetterais de mettre un certain temp avant de passer a l'instruction suivante !!
Exemple : J'affiche une icone de preloading, mais sa ne dure pas trop, même pas 100ms, comment faire pour le faire duré plus longtemps avant de passer a l'instruction suivante !!
Merci !
4 réponses
-
Justement, c'est bien si l'icone de chargement ne s'affiche pas trop longtemps, à quoi bon bloquer l'utilisateur si tout est chargé (à part montrer ton joli icone) ?
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire. -
Tu peux afficher directement l'icone, et le faire disparaitre en fadeOut, on le verra déjà plus longtemps.
Et je ne vois vraiment pas l'intérêt d'afficher l'icone de chargement si c'est inutile ... Ça te plairait que Vista continuer d'afficher le message "Ouverture de la session en cours" lorsque tout est chargé ? -
Tu peux appeler une fonction au bout d'un temps avec setTimeout()
Dans ton cas, cette fonction se chargera de masquer le loader et d'afficher le nouveau texte (je suppose que tu fais une requête AJAX).-
Exactement pour la requete AJAX, sinon pour le setTimeout j'ai beau éssayer sa vx pas fonctionner voici mon code et voila ce que j'ai éssayer :
function request(callback)
{
document.getElementById('error').innerHTML='<img src="img/ajax-loader.gif" height="15px" width="15px" />';
var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
if (xhr.responseText == 'OK' )
{
function loader () {
$(document.getElementById('error')).animate({ marginLeft: "0,6in", opacity:0 }, 20 );
$(document.getElementById('error')).css({ color: "#FFF", fontWeight:"bolder" });
document.getElementById('error').innerHTML='<img src="img/success.png" height="15px" width="15px" /> Pseudo disponible.';
$(document.getElementById('error')).animate({ marginLeft: "0in", opacity:1 }, 1000 );
/*document.getElementById('error').animate({ marginLeft: "0in", opacity:1 }, 1000 ).text('<img src="img/success.png" height="15px" width="15px" /> Pseudo disponible.');*/
surligne (document.getElementById('inscription_pseudo'), false )
return true ;
setTimeout("loader ()", 3000);
}
}
else
.................... -
C'est bon sa a finalement marché xD ....tout ce qu'il fallait que je fasse c'est rendre la fonction en variable ( function loader () { =====> var loader = function () { ) et sur le setTimeout il fallait faire un setTimeout(loader, 3000); et sa a marché !! Le truc c'est que je trouve bizarre que sa marche pas sur la fonction et que sa marche sur la variable je comprend pas pourquoi !!
Sinon avion f-16.....Merci vraiment pour ton aide !
-
-
Ça ne sert à rien d'appeler la même fonction si elle ne masque pas le loader.
function request(callback) { $("#error").html('<img src="img/ajax-loader.gif" height="15px" width="15px" />'); var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { if (xhr.responseText == 'OK' ) { setTimeout(callback+"();", 3000); } } } // Le reste ici (xhr.open, xhr.send) } function loader() { $("#error").animate({ marginLeft: "0,6in", opacity:0 }, 20 ); $("#error").css({ color: "#FFF", fontWeight:"bolder" }); $("#error").html('<img src="img/success.png" height="15px" width="15px" /> Pseudo disponible.'); $("#error").animate({ marginLeft: "0in", opacity:1 }, 1000 ); /*document.getElementById('error').animate({ marginLeft: "0in", opacity:1 }, 1000 ).text('<img src="img/success.png" height="15px" width="15px" /> Pseudo disponible.');*/ surligne(document.getElementById('inscription_pseudo'), false ) return true; }Par contre, tu pourrais faire ta requête AJAX avec JQuery, ainsi qu'utiliser
Sizzle (le sélecteur CSS en Javascript utilisé par JQuery).
