将鼠标停在这个简单的代码上

Question

我想为这段代码添加一个 'onmouseover stop' 设置。这是因为我打算写很长的文本，我想给 reader 一个更改以阻止文本更改，以防他们没有停止阅读。

我发现了类似的问题，但它们与阻止选取框在鼠标悬停时滚动有关。我尝试添加相同的代码，似乎使字幕停止，但它只会让我的代码停止一起工作。

<div id="changeText" ></div>
<script type="text/javascript">
    var text = ["1", "2", "3"];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 5000);
    function change() {
       elem.innerHTML = text[counter];
       counter++;
       if(counter >= text.length) { counter = 0; }
    }
</script>

Answer 1

您可以使用 clearInterval() 并在鼠标悬停事件上传递 setInterval() 调用返回的 intervalId，然后在鼠标移出时重新启动，如下面更新的示例代码所示：

<div onmouseover="stop()" onmouseout="start()" id="changeText" ></div>
<script type="text/javascript">
var text = ["1", "2", "3"];
var counter = 0;
var elem = document.getElementById("changeText");
var intervalId;
start();

function start() {
    intervalId = setInterval(change, 5000);
    function change() {
        elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }
}

function stop() {
    clearInterval(intervalId);
}

</script>

将鼠标停在这个简单的代码上

add stop onmouse over to this simple code

javascript

text

timer

onmouseover