Problème Javascript

Résolu/Fermé

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 - 10 févr. 2011 à 21:58
siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 - 12 févr. 2011 à 17:51

Bonjour.
Voilà j'ai créé un petit script en bref permettant de faire un effet de fondu sur mon image, sauf qu'il n'a pas l'air de fonctionner. Le voici :

<script type="text/javascript">
function opacity() {document.getElementById('img').style.opacity+=0.1;}
}
function fadeIn() {
	while(document.getElementById('img').style.opacity < 1) {
		setTimeout('opacity()',1000);
	}
}
</script>
<img src="image.png" id="img" onClick="fadeIn();" style="opacity:0.1;" />

Merci de m'expliquer mon erreur !

A voir également:

Problème Javascript
Telecharger javascript - Télécharger - Langages
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Javascript echo ✓ - Forum PHP
Exercice calculatrice en javascript ✓ - Forum Javascript
Retour à la ligne javascript ✓ - Forum Javascript

2 réponses

Réponse 1 / 2

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
12 févr. 2011 à 14:26

Salut,
je pense que tu fais une petite confusion entre les fonctions synchrones et asynchrones. Les termes semblent barbares mais en fait c'est assez simple : synchrone c'est ce qui se passe d'habitude, quand tu mets des instructions les unes après les autres.
Dès que tu utilises un setTimeout ou un setInterval, ça devient asynchrone. C'està-dire que la fonction à « timer » (le terme technique est « différer ») est stockée quelque part en mémoire, mais le script repart aussitôt sur les instructions qui suivent, de manière synchrone.

Un petit exemple va éclaircir les choses :

while (...) {
    x = 12; // ça c'est synchrone
    setTimeout(fonctionMachin, 1000); // fonctionMachin n'est pas appelée tout de suite !
    y = 4; // on continue direct ici
}; // et on repart dans le while aussi sec

Il est très (très) probable qu'un tour de while ait duré moins d'une seconde. Du coup, au 2e tour, on se retrouve avec un 2e appel asynchrone en attente.
Au final, on peut avoir des milliers, voire des dizaines de milliers d'appels en attente avant qu'une seconde se soit écoulée. T'imagines le bordel...

Par contre pour faire un appel périodique, tu peux utiliser setInterval :

setInterval(opacity, 1000);

opacity sera appelée toutes les secondes. Le problème c'est pour l'arrêter... Comme c'est asynchrone, le seul moyen de contrôler le moment où il faut l'arrêter c'est à l'intérieur même de cette fonction. Il faut stocker la valeur du timer quelque part. Je suggère une variable globale (même si ce n'est pas le moyen le plus élégant).

window.timer = setInterval(opacity, 1000);

La fonction clearInterval utilisera le timer que tu as récupérer pour arrêter le machin.

function opacity() {
    if (document.get... .opacity >= 1) {
        clearInterval(window.timer);
    }
    document.get... .opacity += 0.1;
}

J'espère que j'ai été assez clair ^^

Réponse 2 / 2

siniko44 Messages postés 172 Date d'inscription vendredi 30 juillet 2010 Statut Membre Dernière intervention 29 novembre 2013 17
12 févr. 2011 à 17:51

Merci beaucoup pour ta réponse ! :)
J'suis passé à autre chose depuis, mais ton message m'a fait comprendre quelques trucs ^^.

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

afficher un tableau JS en HTML

Nodejs.exe est-ce un virus

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters