How to make clearInterval() work in JavaScript-CodePudding

I want to make an element (id=runner) move across the page by n pixels after a mouseover event, then stop at a certain position (left = 2000px), using setInterval() to repeatedly call move_left(), then clearInterval() when left == 200px. I can make the element move, but when I look in developer tools it never stops - left continues to increase. I am pretty new to JavaScript/HTML/CSS. How do I make it stop?

Relevant code:

<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>

CodePudding user response：

Problem -

You declared the interval variable as a constant within another function which is not accessible by the move_left function

So just move your interval variable to global scope (outside the function) and it should work

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);
    }
}

sample on how intervals and clearIntervals work

let interval, i = 1;

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

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

start();

CodePudding user response：

You need to create the var 'go' outside the method cause of the scope, also if you let on the 'body' the 'onmouseover' it will set the interval everytime.

Try this code to test:

    <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>