Suspendre instruction JS

Résolu

wildchildforlife Messages postés 47 Date d'inscription Statut Membre Dernière intervention -
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention - 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 !

Afficher la suite

4 réponses

Réponse 1 / 4
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511

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
1. wildchildforlife Messages postés 47 Date d'inscription Statut Membre Dernière intervention 2
  
  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
Réponse 2 / 4
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511

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
1. wildchildforlife Messages postés 47 Date d'inscription Statut Membre Dernière intervention 2
  
  mdr !! Merci pour l'exemple rien ne m'aurai aussi bien convainque !!
  
  0
2. avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511
  
  :-)
  
  0
3. wildchildforlife Messages postés 47 Date d'inscription Statut Membre Dernière intervention 2
  
  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
Réponse 3 / 4
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511

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
1. wildchildforlife Messages postés 47 Date d'inscription Statut Membre Dernière intervention 2
  
  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
2. wildchildforlife Messages postés 47 Date d'inscription Statut Membre Dernière intervention 2
  
  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 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511

Ç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).

Suspendre instruction JS

4 réponses

Discussions similaires

Newsletters