web-dev-qa-db-fra.com

clearInterval () ne fonctionne pas

Duplicata possible:
JS - Comment effacer l'intervalle après avoir utilisé setInterval ()

J'ai une fonction qui modifie le font-family d'un texte toutes les 500 ms en utilisant setInterval (je l'ai fait juste pour pratiquer JavaScript.) La fonction est appelée en cliquant sur un bouton "on" et l'intervalle est censé être effacé en utilisant un bouton séparé, "de". Cependant, le bouton "off" n'efface pas réellement l'intervalle, il continue juste. Je soupçonne que cela a quelque chose à voir avec la portée, mais je ne sais pas comment l'écrire autrement. De plus, je ne veux pas faire cela avec jQuery car, après tout, je le fais pour apprendre.

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button id="on" type="button" value="turn on">turn on</button>
    <button id="off" type="button" value="turn off">turn off</button>
</p>

<script>
var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");

var fontChange = function() {
    switch(text.className) {
        case "georgia":
            text.className = "arial";
            break;
        case "arial":
            text.className = "courierNew";
            break;
        case "courierNew":
            text.className = "georgia";
            break;      
    }
};

on.onclick = function() {
    setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(fontChange);
}; 
</script>
</body>
javascriptscopesetintervalclearinterval
30
Matt Sanchez

setInterval renvoie un ID que vous utilisez ensuite pour effacer l'intervalle.

var intervalId;
on.onclick = function() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    intervalId = setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(intervalId);
};
53
Konstantin Dinev

La fonction setInterval renvoie une valeur entière, qui est l'ID de l '"instance de temporisateur" que vous avez créée.

C'est cette valeur entière que vous devez passer à clearInterval

par exemple:

var timerID = setInterval(fontChange,500);

et ensuite

clearInterval(timerID);
3
Jon Egerton

Vous utilisez clearInterval de manière incorrecte.

Ceci est la bonne utilisation:

Réglez la minuterie avec

var_name = setInterval(fontChange, 500);

et alors

clearInterval(var_name);
2
Lrdwhyt

La méthode setInterval renvoie un ID d'intervalle que vous devez transmettre à clearInterval afin d'effacer l'intervalle. Vous passez une fonction, qui ne fonctionnera pas. Voici un exemple d'un ensemble de travailInterval/clearInterval

var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);
1
Paul Kehrer

je pense que vous devriez faire:

var myInterval
on.onclick = function() {
    myInterval=setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(myInterval);
};
1
Lorenzo Medeot

Il y a des erreurs dans vos fonctions, mais la première chose à faire est de définir correctement la balise body:

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button id="on" type="button" value="turn on">turn on</button>
    <button id="off" type="button" value="turn off">turn off</button>
</p>
</body>

<script>....</script>

Le problème peut parfois être que vous n'appelez 'var text' et les autres vars qu'une seule fois, lorsque le script démarre. Si vous apportez des modifications au DOM, cette solution statique peut être nuisible.

Vous pouvez donc essayer ceci (c'est une approche plus flexible et en utilisant des paramètres de fonction, vous pouvez donc appeler les fonctions sur l'élément any):

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button type="button" value="turn on"
         onclick=turnOn("go")>turn on</button>
    <button type="button" value="turn off"
         onclick=turnOff()>turn off</button>
</p>
</body>

<script type="text/JavaScript">
var interval;

var turnOn = function(elementId){
    interval = setInterval(function(){fontChange(elementId);}, 500);
};

var turnOff = function(){
    clearInterval(interval);
};

var fontChange = function(elementId) {
    var text = document.getElementById(elementId);
    switch(text.className) {
        case "georgia":
            text.className = "arial";
            break;
        case "arial":
            text.className = "courierNew";
            break;
        case "courierNew":
            text.className = "georgia";
            break;      
    }
};
</script>

Vous n'en avez plus besoin, alors supprimez-le:

var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");

Il s'agit de code dynamique, c'est-à-dire de code JS qui s'exécute de manière générique et ne s'adresse pas directement aux éléments. J'aime plus cette approche que la définition d'une fonction propre pour chaque élément div. ;)

0
Marcus