0

我有一些代码，我有一个计时器。背景每 3 秒改变一次颜色，当您将鼠标悬停在停止按钮上时，颜色更改器会暂停，我有一个 onclick 事件，我正在与 mouseout 事件结合使用，但 mouseout 事件取消了我的 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 更新为 callfullstop()而不是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。我猜也不要在 mouseout 上再次运行它：

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