Bonjour tout le monde !

Je me retrouve confronté à un drôle de problème qui me paraissait, aux premiers abords, plutôt simpliste à résoudre... Et ben en fait non xD

Je veux créer une fonction qui déplace une div vers un point précis en modifiant ses propriétés bottom et left (elle est positionnée en absolute )

Voici donc le code :

function deplacerVers(obj,vXDest,vYDest)
{
	//obj est ma div. Les deux autres paramètres sont les coordonnées du point à atteindre
        var vY=parseInt(obj.style.bottom);
	var vX=parseInt(obj.style.left);
	
	//On modifie les coordonnées selon celles du point de destination
        if(vXDest<vX)
	{
		vX--;
	}
	else if(vXDest>vX)
	{
		vX++;
	}
	
	if(vYDest<vY)
	{
		vY--;
	}
	else if(vYDest>vY)
	{
		vY++;
	}
	
	deplacer(obj,vX,vY); //Cette fonction modifie juste le bottom et le left de obj.

	if(vX==vXDest && vY==vYDest) //Si on est arrivé, c'est super
	{
		//alert(vX+' '+vY);
	}
	else
	{	
		setTimeout("deplacerVers(obj,vXDest,vYDest)",1000); //Sinon, on attend une seconde avant de recommencer 
		alert('oui');
	}
}

Le problème vient donc du setTimeout. Comme ceci :
setTimeout("deplacerVers(obj,vXDest,vYDest)",1000);
La fonction deplacerVers ne s'exécute qu'une fois (le alert('oui') ne s'affiche qu'une fois)

Mais comme ceci :
setTimeout(deplacerVers(obj,vXDest,vYDest),1000);
La fonction s'exécute correctement et la div se déplace jusqu'au point voulu... Le alert('oui') s'affiche autant de fois qu'il faut à la div pour arriver à destination.
Mais sans cet alert, elle se déplace trèèèès rapidement (on ne voit pas le mouvement, comme si elle se téléportait)
J'ai beau modifié la valeur du temps en milli-secondes (j'ai même essayé 1000000000000000000000000000 ) mais rien n'y change, la div se "téléporte").

Je ne comprends vraiment pas pourquoi... Avez-vous une idée ?
Merci d'avance

Hop, apprendre à faire des bôôô timeout qui fonctionnent :
Bonnes pratiques JavaScript

Ha oui tiens, avec

setTimeout(function(){deplacerVers(obj,vXDest,vYDest);},1000);

Ca fonctionne parfaitement.

Merci beaucoup

Mais à titre informatif, pourquoi ceci :

setTimeout(deplacerVers(obj,vXDest,vYDest),1000);

Ne fonctionnait pas ? Pourquoi devoir passer par une fonction anonyme ?

// Fonction bidon pour l'exemple
function test(str) {
  alert(str);
  return 254;
}

var ma_variable = test("Coucou"); // affiche "Coucou"

// Elle contient quoi là, ma_variable ? 
// 254 !!!

// Donc si j'écris :

setTimeout(test(),1000);

// c'est comme si j'écrivais :

setTimeout(254,1000);

// Ca n'a plus aucun sens 

// Et en plus ça m'affiche "Coucou" directement (et non pas une seconde plus tard)


// Donc, on utilise une fonction anonyme :

setTimeout(function(){ test("Coucou");},1000);

pour compléter Golmote,
setTimeout prend comme paramètre une référence à une fonction (qu'il exécutera au moment voulu)

setTimeout(deplacerVers(obj,vXDest,vYDest),1000);

là tu exécutes d'abord la fonction deplacerVers avec ces paramètres puis dans 1s tu exécuteras le retour de cette fonction (du coup si elle ne retourne pas une fonction, il va y avoir une erreur).

Yep ! Super conclusion

Ha oui, d'accord, dis comme ça c'est en effet bien plus clair, merci

Etonnant que tous les "manuels" Javascipt que l'on peut trouver sur le net ne précisent pas ce passage de référence comme vous venez de le faire...

Encore merci, ça me sera très utile !

Parce que tous les "manuels" qui apprennent le JavaScript sur internet, c'est de la merde.

Enfin presque tous.

D'ailleurs il faut que je trouve un moment pour lire les tutos qui traînent sur le net histoire de trouver les bons...

Et écrire le tuto... écrire le tuto... écrire le tuto... écrire le tuto...