Quiero hacer que un elemento (id = corredor) se mueva a lo largo de la página por n píxeles después de un evento de mouseover, luego se detenga en una posición determinada (izquierda = 2000 px), usando setInterval() para llamar repetidamente a move_left(), luego clearInterval() cuando se deja == 200px. Puedo hacer que el elemento se mueva, pero cuando miro en las herramientas de desarrollo, nunca se detiene: la izquierda continúa aumentando. Soy bastante nuevo en JavaScript/HTML/CSS. ¿Cómo hago para que se detenga?
Código relevante:
<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>Problema -
Así que simplemente mueva su variable de intervalo al alcance global (fuera de la función) y debería funcionar
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); } }ejemplo de cómo funcionan los intervalos y clearIntervals
let interval, i = 1; function start() { interval = setInterval(log, 1000); } function log() { if (i >= 5) clearInterval(interval); console.log(`Test ${i}`); i++ } start();Debe crear la var 'go' fuera de la causa del método del alcance, también si deja en el 'cuerpo' el 'onmouseover' establecerá el intervalo cada vez.
Pruebe este código para probar:
<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>