怎样正确使用的setInterval和clearInterval两种不同功能之间进行切换？ [英] How do I correctly use setInterval and clearInterval to switch between two different functions?
问题描述
有关做法我想显示一个数字，从0递增 - 9，然后从9递减 - 0，无限重复
该code，我迄今似乎接近，但我的2各自的职能在第二次迭代的的setInterval 通话 COUNTUP 和 countDown方法似乎与对方发生冲突，因为显示的数字没有在预期的顺序计数......然后浏览器崩溃。
这里是我的code：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;算法测试与LT; /标题＆GT;
＆LT; /头＆GT; ＆LT;身体的onload =onloadFunctions（）;＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
功能onloadFunctions（）
{
计数（）;
的setInterval（COUNTUP，200）;
} 变种数= 0;
功能COUNTUP（）
{
的document.getElementById（这里）的innerHTML =计数。
算上++; 如果（计数== 10）
{
clearInterval（本）;
COUNTDOWN（）;
的setInterval（倒计时，200）;
}
}
功能COUNTDOWN（）
{
的document.getElementById（这里）的innerHTML =计数。
计数 - ; 如果（计数== 0）
{
clearInterval（本）;
计数（）;
的setInterval（COUNTUP，200）;
}
}
＆LT; / SCRIPT＆GT; 从0 - 9，上下：放大器; NBSP;＆安培; NBSP;＆LT; DIV ID =点击这里＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
您需要捕获从的setInterval（...）到一个变量，因为这是返回值的参考定时器：
VAR区间;功能onloadFunctions（）
{
计数（）;
间隔=的setInterval（COUNTUP，200）;
}/ * ... code ... * /功能COUNTDOWN（）
{
的document.getElementById（这里）的innerHTML =计数。
计数 - ; 如果（计数== 0）
{
clearInterval（间隔）;
计数（）;
间隔=的setInterval（COUNTUP，200）;
}
}
For practice I am trying to display a number that increments from 0 - 9, then decrements from 9 - 0, and infinitely repeats.
The code that I have so far seems to be close, but upon the second iteration the setInterval calls of my 2 respective functions countUp and countDown seem to be conflicting with each other, as the numbers displayed are not counting in the intended order... and then the browser crashes.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Algorithm Test</title>
</head>
<body onload = "onloadFunctions();">
<script type = "text/javascript">
function onloadFunctions()
{
countUp();
setInterval(countUp, 200);
}
var count = 0;
function countUp()
{
document.getElementById("here").innerHTML = count;
count++;
if(count == 10)
{
clearInterval(this);
countDown();
setInterval(countDown, 200);
}
}
function countDown()
{
document.getElementById("here").innerHTML = count;
count--;
if(count == 0)
{
clearInterval(this);
countUp();
setInterval(countUp, 200);
}
}
</script>
From 0 - 9, up and down: <div id = "here"></div>
</body>
</html>
You need to capture the return value from setInterval( ... ) into a variable as that is the reference to the timer:
var interval;
function onloadFunctions()
{
countUp();
interval = setInterval(countUp, 200);
}
/* ... code ... */
function countDown()
{
document.getElementById("here").innerHTML = count;
count--;
if(count == 0)
{
clearInterval(interval);
countUp();
interval = setInterval(countUp, 200);
}
}
这篇关于怎样正确使用的setInterval和clearInterval两种不同功能之间进行切换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
