clearInterval() nie działa

Powiel możliwe:
JS - How to clear interval after using setInterval()clearInterval() nie działa

Mam funkcja, która zmienia font-family jakiegoś tekstu co 500 ms wykorzystujące setInterval (zrobiłem to po prostu ćwiczyć JavaScript .) Funkcja jest wywoływana przez kliknięcie przycisku "on", a interwał powinien zostać wyczyszczony za pomocą osobnego przycisku "off". Jednak przycisk "off" w rzeczywistości nie kasuje interwału, po prostu trwa. Podejrzewam, że ma to coś wspólnego z zasięgiem, ale nie jestem pewien, jak napisać to w jakikolwiek inny sposób. Ponadto nie chcę tego robić z jQuery, ponieważ w końcu robię to, aby się uczyć.

<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>

Źródło

2013-02-02 Matt Sanchez

Dowiedz się, jak działa 'clearInterval', czytając trochę dokumentacji: https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval. –

Najpierw przyjrzałem się specyfikacji MDN, ale nie pomogło mi to z problemem. –

window.timer = setInterval (fontChange, 500); clearInterval (window.timer) – Samiul

setInterval zwraca identyfikator, który następnie użyć, aby wyczyścić przedział .

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

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

Źródło

2013-02-02 21:56:41

jest w porządku, ale napotkasz inny problem, jeśli używasz setInterval() (lub setTimeout()) w sytuacji, w której można uruchomić go wiele razy. Jeśli klikniesz dwa razy, nigdy nie usuniesz pierwszej setInterval(). Musisz albo (intervalId! == undefined) {intervalId = setInterval (... lub uczynić intervalId an Array, jeśli potrzebujesz więcej setIntervals na każde dodatkowe kliknięcie – papo

Sposób setInterval zwraca identyfikator interwału, które trzeba przekazać do clearInterval w celu oczyszczenia interwał. Przekazujesz funkcję, która nie zadziała. Oto przykład z pracy setInterval/clearInterval

var interval_id = setInterval(myMethod,500); 
clearInterval(interval_id);

Źródło

2013-02-02 21:56:20

Funkcja setInterval zwraca wartość całkowitą, która jest id „instancją timer”, które zostały utworzone.

Jest to wartość całkowita, że trzeba przejść do clearInterval

np:

var timerID = setInterval(fontChange,500);

a później

clearInterval(timerID);

Źródło

2013-02-02 21:56:23

myślę, że należy zrobić:

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

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

Źródło

2013-02-02 21:57:18

Używasz clearInterval nieprawidłowo.

Jest to właściwe wykorzystanie:

Ustaw timer z

var_name = setInterval(fontChange, 500);

a następnie

clearInterval(var_name);

Źródło

2013-02-02 21:58:52 Lrdwhyt

występują błędy w swoich funkcji, ale pierwszą rzeczą, jaką należy zrobić, jest aby poprawnie ustawić treść tagu:

<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>

Problem może czasem polegać na tym, że wywołujesz "var text" i pozostałe vary tylko raz, gdy skrypt się uruchamia. Jeśli dokonasz zmian w DOM, to statyczne rozwiązanie może być szkodliwe.

Więc można spróbować to (jest to bardziej elastyczne podejście i za pomocą parametrów funkcji, dzięki czemu można wywoływać funkcje na dowolny element):

<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>

Nie musisz już tego, więc usunąć go:

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

jest dynamiczny kod, co oznacza kod JS kursujący ogólny i nie elementy przemawiać publicznie bezpośrednio. Lubię to podejście bardziej niż definiowanie własnej funkcji dla każdego elementu div. ;)

Źródło

2013-02-03 00:53:58 Marcus

clearInterval() nie działa

Odpowiedz

Powiązane problemy