如何使 clearInterval() 在 JavaScript 中工作

Question

我想让一个元素（id=runner）在mouseover事件后在页面上移动n个像素，然后停在某个位置（left = 2000px），使用setInterval()重复调用move_left()，然后在离开 == 200px 时使用 clearInterval()。我可以让元素移动，但当我查看开发人员工具时，它永远不会停止——左边继续增加。我对 JavaScript/HTML/CSS 很陌生。我如何让它停止？

相关代码：

<script>
    function runner_go()
    {
        var load_time = performance.now();
        const go = setInterval(move_left,20);
    }

    function move_left()
    {
        document.getElementById('runner').style.visibility = "visible";
        var runner_position = getComputedStyle(document.getElementById('runner')).getPropertyValue('left');
        document.getElementById('runner').style.left = parseInt(runner_position,10) + 17 + "px";
        if (parseInt(runner_position,10) > 2000)
        {
            clearInterval(go);
        }
    }
</script> 
</head> 
<body style="background-color:gray;" onmouseover = "runner_go();">
    <div>
       <h1>Running!</h1>
    </div>
    <img src="images/runner_l.png" alt ="running man" style="position:relative; visibility:hidden;" id = "runner"/> 
</body>

Answer 1

问题 -

您在 move_left 函数

所以只需将您的区间变量移动到全局范围（在函数之外），它应该可以工作

let go;
function runner_go() {
    var load_time = performance.now();
    go = setInterval(move_left, 20);
}

function move_left() {
    document.getElementById('runner').style.visibility = "visible";
    var runner_position = getComputedStyle(document.getElementById('runner')).getPropertyValue('left');
    document.getElementById('runner').style.left = parseInt(runner_position, 10) + 17 + "px";
    if (parseInt(runner_position, 10) > 2000) {
        clearInterval(go);
    }
}

间隔和 clearIntervals 如何工作的示例

let interval, i = 1;

function start() {
    interval = setInterval(log, 1000);
}

function log() {
    if (i >= 5) clearInterval(interval);
    console.log(`Test ${i}`);
    i++
}

start();

Answer 2

您需要在范围的方法原因之外创建 var 'go'，如果您让 'body' 'onmouseover' 每次都会设置间隔。

尝试使用此代码进行测试：

    <head>
<script>
     let go = null;    
     function runner_go()
    {
        var load_time = performance.now();
        
        go = setInterval(move_left,20);
    }

    function move_left()
    {
        document.getElementById('runner').style.visibility = "visible";
        var runner_position = getComputedStyle(document.getElementById('runner')).getPropertyValue('left');
        document.getElementById('runner').style.left = parseInt(runner_position,10) + 17 + "px";
        if (parseInt(runner_position,10) > 2000)
        {
            clearInterval(go);
        }
    }
</script> 
</head> 
<body style="background-color:gray;" onclick = "runner_go();">
<div>
    <h1>Running!</h1>
</div>
<img src="images/runner_l.png" alt ="running man" style="position:relative; visibility:hidden;" id = "runner"/> </body>

如何使 clearInterval() 在 JavaScript 中工作

How to make clearInterval() work in JavaScript

javascript

html

setinterval

clearinterval