Javascript - 调用 clearInterval() 后 setInterval() 仍在运行
Posted
技术标签:
【中文标题】Javascript - 调用 clearInterval() 后 setInterval() 仍在运行【英文标题】：Javascript - setInterval() still running after clearInterval() called 【发布时间】：2016-07-16 15:14:09 【问题描述】：我正在使用 javascript 制作游戏。我有向左、向右、重力和向下移动的功能。重力功能使玩家的位置在离开平台 (div) 后移至屏幕底部。当您向右移动时调用重力（）函数（OnButtonDownr（）），它会阻止向上移动。我的意思是，当我向右走下平台然后尝试上去时，它不起作用，但我可以在下平台之前上去。当我尝试向上（但它不起作用）时，它会产生一种奇怪的效果，看起来它的位置被设置为 0，但同时向上移动。我的代码：
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);
我该如何解决这个问题。提前致谢。
【问题讨论】：
【参考方案1】：您可能没有正确清除。在设置间隔之前清除之前设置的任何一个。
if(window.idl) clearInterval(window.idl);
window.idl = setInterval(framel, 5);
【讨论】：
以上是关于Javascript - 调用 clearInterval() 后 setInterval() 仍在运行的主要内容，如果未能解决你的问题，请参考以下文章