英文:
setInterval and clearInterval issues?
问题
I'm having issues with this timer I'm using to build a simple game. The function I'm trying to loop is function game(), which makes the div "box," initialized at the far right of the screen, animate all the way to the left of the screen, then immediately back to the far right. Essentially, it creates the illusion of obstacles coming towards the player. Clicking button "start" sets the interval. Clicking "stop" should clear it.
If I want to set the period of the interval, I know I have to change the second value in setInterval(game, x), but when I give a value x, only the first instance is delayed by that amount, then the function loops without delay. What is wrong with my function or the execution of setInterval? Do you have any suggestions for improving my method of accomplishing the above goal?
Also, my clearInterval(timer) only works sometimes, mostly when the period of the interval is long. Is there simply too much going on in the function and the program can't handle clearing the interval on a short period? Thanks for your help.
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#down").click(function(){
$("#move").animate({top:'+=75px'}, 160, 'linear')
});
$("#up").click(function(){
$("#move").animate({top:'-=75px'}, 160, 'linear')
});
function game(){
var a = [0,10,15,20,25,35,40,45,50,55,62];
var b = Math.floor(Math.random() * a.length);
var c = a[b];
$("#box").animate({right: '+=100%'}, 1000, 'linear');
$("#box").animate({right: '-=100%'}, 10);
$("#box").animate({top: c+'%'}, 0);
};
var timer;
$("#start").on('click', function(){timer = setInterval(game,1000)})
$("#stop").on('click', function(){clearInterval(timer)})
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<style>
.move {
border: 1px solid black;
position: absolute;
left: 50px; top: 40%;
height: 40px; width: 40px;
background-color: rgb(0,255,100);
}
.box {
border: 1px solid black;
position: absolute;
right: 0%; top: 26%;
height: 38%; width: 2.2%;
background-color: red
}
</style>
</head>
<body>
<div id = everything class = everything>
<div class = move id = move></div>
<div class = box id = box></div>
<button id = start>Start</button>
<button id = stop>Stop</button>
<button id = down>DOWN</button>
<button id = up>UP</button>
</div>
<!-- end snippet -->
I'm having issues with this timer I'm using to build a simple game. The function I'm trying to loop is function game(), which makes the div "box", initialized at the far right of the screen, animate all the way to the left of the screen, then immediately back to the far right. Essentially, it creates the illusion of obstacles coming towards the player. Clicking button "start" sets the interval. Clicking "stop" should clear it.
If I want to set the period of the interval, I know I have to change the second value in setInterval(game, x), but when I give a value x, only the first instance is delayed by that amount, then the function loops without delay. What is wrong with my function or the execution of setInterval? Do you have any suggestions for improving my method of accomplishing the above goal?
Also, my clearInterval(timer) only works sometimes, mostly when the period of the interval is long. Is there simply too much going on in the function and the program can't handle clearing the interval on a short period? Thanks for your help.
答案1
得分: 1
我建议仍然使用requestAnimationFrame，以下是解决您问题的答案：
-
使用
$().finish()以较小的间隔停止动画。 -
在您的
start函数中，还要使用clearInterval(timer)，以防多次点击开始按钮。
$("#down").click(function(){
$("#move").animate({top:'+=75px'}, 160, 'linear');
});
$("#up").click(function(){
$("#move").animate({top:'-=75px'}, 160, 'linear');
});
function game(){
var a = [0,10,15,20,25,35,40,45,50,55,62];
var b = Math.floor(Math.random() * a.length);
var c = a[b];
$("#box").animate({right: '+=100%'}, 1000, 'linear');
$("#box").animate({right: '-=100%'}, 10);
$("#box").animate({top: c+'%'}, 0);
};
var timer;
$("#start").on('click', function(){
game();
clearInterval(timer);
timer = setInterval(game, 1000);
});
$("#stop").on('click', function(){
$("#box").finish();
clearInterval(timer);
});
HTML部分不需要翻译。
英文:
I would suggest to use requestAnimationFrame still find below answer for your issue
-
Use
$().finish()to stop animation with smaller interval. -
Also use
clearInterval(timer)in yourstartas if you click start multiple times.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#down").click(function(){
$("#move").animate({top:'+=75px'}, 160, 'linear')
});
$("#up").click(function(){
$("#move").animate({top:'-=75px'}, 160, 'linear')
});
function game(){
var a = [0,10,15,20,25,35,40,45,50,55,62];
var b = Math.floor(Math.random() * a.length);
var c = a[b];
$("#box").animate({right: '+=100%'}, 1000, 'linear');
$("#box").animate({right: '-=100%'}, 10);
$("#box").animate({top: c+'%'}, 0);
};
var timer;
$("#start").on('click', function(){game();clearInterval(timer); timer = setInterval(game,1000)})
$("#stop").on('click', function(){
$("#box").finish();
clearInterval(timer)
})
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<style>
.move {
border: 1px solid black;
position: absolute;
left: 50px; top: 40%;
height: 40px; width: 40px;
background-color: rgb(0,255,100);
}
.box {
border: 1px solid black;
position: absolute;
right: 0%; top: 26%;
height: 38%; width: 2.2%;
background-color: red
}
</style>
</head>
<body>
<div id = everything class = everything>
<div class = move id = move></div>
<div class = box id = box></div>
<button id = start>Start</button>
<button id = stop>Stop</button>
<button id = down>DOWN</button>
<button id = up>UP</button>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论