11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un petit souci avec l'utilisation du setTimeout.

J'ai plusieurs bouton, qui, en cliquant dessus, affiche des informations dans une div caché. La div apparait lors de la même action de clique.
Elle disparait au bout de 5 secondes.

Mon souci le voici : Si je clique sur un bouton, les infos du bouton s'affiche dans la div qui apparait et le SetTimeout se lance afin de caché cette div 5 secondes plus tard. Seulement si au bout de 3 secondes, je clique sur un autre bouton, les infos de celui-ci resteront seulement 2 secondes (le reste de 5 secondes initiales).
Comment puis-je faire pour qu'à chaque clique, le setTimeout précédant soit stoppé et un nouveau soit créé ?

Voici mon code actuel :

function showInfo(capLabel, capType, capIp, railLabel, b)
{
	var infos = "<label class=\"titre\">Capteur :</label><label class=\"resultat\">" + capLabel + "</label></br>" +
				"<label class=\"titre\">Type :</label><label class=\"resultat\">" + capType + "</label></br>" +
				"<label class=\"titre\">Ip :</label><label class=\"resultat\">" + capIp + "</label></br>" +
				"<label class=\"titre\">Section :</label><label class=\"resultat\">" + railLabel + "</label></br>";
				
	document.getElementById('afficheInfo').style.display= b ? '' : 'none';
	document.getElementById('afficheInfo').innerHTML = infos;
	setTimeout(function displayOff () { document.getElementById('afficheInfo').style.display= b ? 'none' : '';}, 5000);
}


Petit précision pour ce code : b vaut "true" à chaque clique sur un bouton.

J'ai essayé avec un clearTimeout mais ça ne marche pas, je l'utilise sans doute mal :

function showInfo(capLabel, capType, capIp, railLabel, b)
{
	var timer = null;
	clearTimeout(timer);
	var infos = "<label class=\"titre\">Capteur :</label><label class=\"resultat\">" + capLabel + "</label></br>" +
				"<label class=\"titre\">Type :</label><label class=\"resultat\">" + capType + "</label></br>" +
				"<label class=\"titre\">Ip :</label><label class=\"resultat\">" + capIp + "</label></br>" +
				"<label class=\"titre\">Section :</label><label class=\"resultat\">" + railLabel + "</label></br>";
				
	document.getElementById('afficheInfo').style.display= b ? '' : 'none';
	document.getElementById('afficheInfo').innerHTML = infos;
	timer = setTimeout(function displayOff () { document.getElementById('afficheInfo').style.display= b ? 'none' : '';}, 5000);
}