BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複］

2022-01-22 13:52:16

質問

<ブロッククオート

重複の可能性があります。
JS - setInterval()を使用した後に間隔をクリアする方法

を変更する関数があるのですが font-family を使用して、500msごとにいくつかのテキストの setInterval (この関数は、"on" というボタンをクリックすると呼び出され、"off" という別のボタンで間隔が解除されるようになっています。しかし、"off"ボタンは実際には間隔をクリアせず、ただ継続するだけです。これはスコープと関係があるのではないかと思うのですが、他にどう書けばいいのかわかりません。また、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>

解決方法は？

setInterval はIDを返し、それを使ってインターバルをクリアします。 

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

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します