Javascript - clearInterval()이 실행 된 후에 setInterval()이 계속 실행됩니다.

자바 스크립트로 게임을 만들고 있습니다. 나는 왼쪽, 오른쪽, 중력, 아래로 움직이는 기능을 가지고있다. 중력 함수는 플랫폼 (div)에서 벗어나면 플레이어의 위치가 화면 하단으로 이동하도록합니다. 중력() 함수가 오른쪽 (OnButtonDownr())으로 움직일 때 호출되면 작동에서 위로 이동을 멈 춥니 다. 내 말은 내가 플랫폼에서 오른쪽으로 내려 가면 올라가려 고 시도하면 작동하지 않지만 플랫폼에서 나가기 전에 올라갈 수 있다는 것입니다. 올라가려고 할 때 (그리고 작동하지 않을 때) 그것은 그 위치가 0으로 설정되어있는 것처럼 보이지만 동시에 움직이는 이상한 효과가 있습니다. 내 코드 :Javascript - clearInterval()이 실행 된 후에 setInterval()이 계속 실행됩니다.

HTML (index.htm으로) :

<html> 
<head><link rel='stylesheet' href='style.css'></head> 
<body> 


<div id='level' class='level'> 
    <div class='start_platform' id='plat1'></div> 
    <div class='platform' style=' 

           '></div> 
</div> 


    <img id='player' src='img/player.png' style='height:64px;'></img> 
    <div class='buttons'> 
     <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)"><--</button> 
     <button id='moveup' onmousedown="OnButtonDownu (this)" onmouseup="OnButtonUpu (this)">^</button> 
     <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">--></button> 
    </div> 
</body> 

<script type='text/javascript' src='scripts/move.js'></script> 
<script type='text/javascript' src='scripts/gravity.js'></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</html>

JS (move.js) :

//move left 
var elem = document.getElementById("player"); 
function OnButtonDownl (button) { 
    var posl = parseInt(document.getElementById("player").style.left, 10) || 0; 
window.idl = setInterval(framel, 5); 
function framel() { 
    posl--; 
    elem.style.left = posl + 'px'; 
    gravityCheck(); 
}} 
function OnButtonUpl (button) { 
    clearInterval(idl); 
} 

//move right 
var elem = document.getElementById("player"); 
function OnButtonDownr (button) { 
var posr = parseInt(document.getElementById("player").style.left, 10) || 0; 
window.idr = setInterval(framer, 5); 
function framer() { 
    posr++; 
    elem.style.left = posr + 'px'; 
    gravityCheck(); 
}} 
function OnButtonUpr (button) { 
    clearInterval(idr); 
} 

//move up 
var elem = document.getElementById("player"); 
function OnButtonDownu() { 
var posu = parseInt(document.getElementById("player").style.bottom, 10) || 0; 
window.idu = setInterval(frameu, 5); 
elem.style.bottom = 0; 
function frameu() { 
    gravity = false; 
    posu++; 
    elem.style.bottom = posu + 'px'; 
}} 
function OnButtonUpu (button) { 
    clearInterval(idu); 
}

JS (gravity.js) :

var gravity = true; 
function gravityCheck() { 
var player = parseInt(document.getElementById("player").style.left, 10) || 0; 
var plat1 = parseInt(document.getElementById("plat1").style.left, 10) || 0; 

var width = player - plat1; 

    var elem = document.getElementById("player"); 
    var pos = parseInt(document.getElementById("player").style.bottom, 10) || 0; 
    window.id = setInterval(frame, 5); 
    function frame() { 
    if(width > 100 && width < 164) { 
    if(gravity = true) { 
     pos--; 
     elem.style.bottom = pos + 'px'; 
     if(elem.style.bottom = 0) { 
      clear(); 
     } 
    } 
    } 
    } 
function clear() { 
clearInterval(id); 
}}

이 문제를 어떻게 해결합니까? 미리 감사드립니다.

출처

2016-07-16 Ben Welch

제대로 지울 수 없습니다. 간격을 설정하기 전에 이전에 설정된 간격을 지우십시오.

if(window.idl) clearInterval(window.idl); 
window.idl = setInterval(framel, 5);

출처

2016-07-16 15:31:19

Javascript - clearInterval()이 실행 된 후에 setInterval()이 계속 실행됩니다.

답변

관련 문제