web-dev-qa-db-ja.com

clearInterval（）が機能しない

可能性のある複製：
JS-setInterval（）を使用した後に間隔をクリアする方法

setIntervalを使用して500ミリ秒ごとに一部のテキストのfont-familyを変更する関数があります（JavaScriptを練習するためだけに作成しました）。この関数は、[オン]ボタンと間隔別のボタン「オフ」を使用してクリアすることになっています。ただし、「オフ」ボタンは実際には間隔をクリアせず、そのまま継続します。これはスコープと関係があるのではないかと疑っていますが、他の方法でそれを書く方法はわかりません。また、jQueryでこれを実行したくないのは、結局のところ、学習するために実行しているからです。

<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は、間隔をクリアするために使用するIDを返します。

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

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

setInterval関数は整数値を返します。これは、作成した「タイマーインスタンス」のIDです。

clearIntervalに渡す必要があるのはこの整数値です

例えば：

var timerID = setInterval(fontChange,500);

以降

clearInterval(timerID);
3
Jon Egerton

ClearIntervalを誤って使用しています。

これは適切な使用法です。

でタイマーを設定します

var_name = setInterval(fontChange, 500);

その後

clearInterval(var_name);
2
Lrdwhyt

setInterval メソッドは、間隔をクリアするためにclearIntervalに渡す必要がある間隔IDを返します。関数を渡していますが、機能しません。動作するsetInterval/clearIntervalの例を次に示します

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

私はあなたがすべきだと思う：

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

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

関数にはエラーがありますが、最初に行うべきことは、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>

問題は、スクリプトの開始時に「var text」と他のvarsを一度だけ呼び出すことである場合があります。 DOMに変更を加えると、この静的なソリ​​ューションが有害になる可能性があります。

したがって、これを試すことができます（これはより柔軟なアプローチであり、関数パラメーターを使用するため、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>

これはもう必要ないので、削除してください：

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

これは動的コードです。つまり、汎用で実行され、要素を直接処理しないJSコードを意味します。 div要素ごとに独自の関数を定義するよりも、このアプローチが好きです。 ;）

0
Marcus