Suspendre instruction JS

Résolu/Fermé
wildchildforlife Messages postés 74 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 23 juillet 2011 - 16 mai 2010 à 14:49
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 - 16 mai 2010 à 20:41
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 !


4 réponses

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
Modifié par avion-f16 le 16/05/2010 à 15:30
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.
0
wildchildforlife Messages postés 74 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 23 juillet 2011 2
16 mai 2010 à 16:04
ce que tu viens d'écrire entre parenthése est bien ce que je cherche :D !!....pas trop longtemp mais juste genre 2000ms !! parceque je fais un fadeIn et un fadeOut pour le span du coup on voit a peine l'icone xD donc j'aimerai le retarder un peu genre 2000ms =) !!
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
16 mai 2010 à 17:43
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é ?
0
wildchildforlife Messages postés 74 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 23 juillet 2011 2
16 mai 2010 à 17:45
mdr !! Merci pour l'exemple rien ne m'aurai aussi bien convainque !!
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
16 mai 2010 à 17:49
:-)
0
wildchildforlife Messages postés 74 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 23 juillet 2011 2
16 mai 2010 à 17:50
Sinon pour ce que j'ai demandé, je c'est pas sa pourrai m'aider un jour ou l'autre.....pour s'arrété sur une instruction pendant quelques seconde avant de passer a la suivante, ce n'est pas possible ?!
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
16 mai 2010 à 18:43
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).
0
wildchildforlife Messages postés 74 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 23 juillet 2011 2
16 mai 2010 à 19:52
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
....................
0
wildchildforlife Messages postés 74 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 23 juillet 2011 2
16 mai 2010 à 20:33
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 !
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
16 mai 2010 à 20:41
Ç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).
0