0

タイマーがあるコードがいくつかあります。3 秒ごとに背景の色が変わり、停止ボタンをホバーすると、カラー チェンジャーが一時停止します。マウスアウト イベントとのジャンクションで使用している onclick イベントがありますが、マウスアウト イベントは onclick イベントをキャンセルします。マウスを停止ボタンから離した後も onclic イベントが機能するようにするにはどうすればよいですか?

コード: jsfiddle

<script>
var colors = new Array();
colors[0] = "green";
colors[1] = "blue";
colors[2] = "gray";
var i = 0;
var timer;

function changeOfPlans() {
    timer = setInterval("colorChange()", 3000);
}

function colorChange() {
    document.getElementById("one").style.backgroundColor = colors[i];
    document.getElementById("two").style.backgroundColor = colors[i];
    i++;
    if (i == 3 || i > 3) {
        //start over by setting i to 0
        i = 0;
    }
}

function stop() {
    clearTimeout(timer);
}​
</script>
4

2 に答える 2

1

変数を設定するように、クリック時のアクションを更新する必要があります。次に、色の変更を再開する前に、その変数が設定されているかどうかを最初に確認します。デモ。

JavaScript を次のように変更しました。

var stopped = false;

function changeOfPlans() {
    if (!stopped) {
        timer = setInterval("colorChange()",3000);
    }
}

function fullstop() {
  stopped = true;
  stop();
}

次に、 onclick を更新してfullstop()、 だけではなくcall にしましたstop()。他のstop()機能はそのままにしておいたので、ホバーして停止して移動して再起動する機能は、元の機能と同じように引き続き機能します。他のすべての JavaScript は同じままです。

<button type="button" onmouseover="stop()" onmouseout="changeOfPlans()" onclick="fullstop()">Stop</button>

これを行う方法は他にもあります - enhzflep はコメントで良い方法を提案しています - しかし、これが最も簡単です。

于 2012-10-24T15:59:52.920 に答える
0

を使用してsetIntervalいるため、キャンセルする必要はありclearIntervalませんclearTimeout。また、私が推測するマウスアウトで再度実行しないでください：

onmouseout="changeOfPlans()"
于 2012-10-24T16:00:19.880 に答える