48

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

font-family500ミリ秒ごとにテキストを変更する関数がありますsetInterval（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>
4

6 に答える 6

77

setInterval間隔をクリアするために使用するIDを返します。

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

off.onclick = function() {
    clearInterval(intervalId);
};
于 2013-02-02T21:56:41.923 に答える
6

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

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

例えば：

var timerID = setInterval(fontChange,500);

以降

clearInterval(timerID);
于 2013-02-02T21:56:23.530 に答える
2

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

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

off.onclick = function() {
    clearInterval(myInterval);
};
于 2013-02-02T21:57:18.877 に答える
2

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

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

でタイマーを設定します

var_name = setInterval(fontChange, 500);

その後

clearInterval(var_name);
于 2013-02-02T21:58:52.713 に答える
1

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

var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);
于 2013-02-02T21:56:20.893 に答える
1

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

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

したがって、これを試すことができます（これは、より柔軟なアプローチであり、関数パラメーターを使用するため、任意の要素で関数を呼び出すことができます）。

<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要素に対して独自の関数を定義するよりもこのアプローチが好きです。;）

于 2013-02-03T00:53:58.040 に答える