2014-10-22 136 views
0

我用setTimeout来传递运动。还有一点(可能是任何时候)我想暂停一下。我看过在这里写过的其他人。但很难理解。 任何人都可以给我一些建议工作吗?谢谢。javascript暂停功能

function start(){ 
a(); 
} 

function a(){ 
document.getElementById('a').style.display = 'block'; 
setTimeout(b,1000); 
} 
function b(){ 
document.getElementById('b').style.display = 'block'; 
setTimeout(c,1000); 
} 
function c(){ 
document.getElementById('c').style.display = 'block'; 
setTimeout(d,1000); 
} 
function d(){ 
document.getElementById('d').style.display = 'block'; 
setTimeout(e,1000); 
} 
function e(){ 
document.getElementById('e').style.display = 'block'; 
} 
+1

对于每个元素,您不需要单独的函数,可以定义一个接受选择器参数的函数。 – undefined 2014-10-22 10:52:39

+0

[JavaScript,setTimeout]可能的重复(http://stackoverflow.com/questions/10312963/javascript-settimeout) – 2014-10-22 10:55:31

+1

我不清楚你想要做什么。请编辑并描述你想要的内容。 – 2014-10-22 11:04:10

回答

0

这样的事情?

<script> 
var timer = null; 
var callback = null; 

function start() { 
    clearTimeout(timer); // prevent a previous timer from doubling the speed 
    // first time, see if callback is set 
    if(! callback) { 
    callback = a; 
    } 
    // last function. make it stop 
    if(callback === e) { 
    return; 
    } 
    callback(); 
} 
function pause() { 
    clearTimeout(timer); 
} 

function a() { 
    document.getElementById('a').style.display = 'block'; 
    timer = setTimeout(b, 1000); 
    callback = a; 
} 
function b() { 
    document.getElementById('b').style.display = 'block'; 
    timer = setTimeout(c, 1000); 
    callback = b; 
} 
function c() { 
    document.getElementById('c').style.display = 'block'; 
    timer = setTimeout(d, 1000); 
    callback = c; 
} 
function d() { 
    document.getElementById('d').style.display = 'block'; 
    timer = setTimeout(e, 1000); 
    callback = d; 
} 
function e() { 
    document.getElementById('e').style.display = 'block'; 
    callback = e; 
} 
</script> 
<style> 
#a, #b, #c, #d, #e { 
    display: none; 
    width: 100px; 
    height: 100px; 
} 
</style> 

<input type="button" value="start" onclick="start()"> 
<input type="button" value="pause" onclick="pause()"> 

<div id="my_box"> 
    <div id="a">A</div> 
    <div id="b">B</div> 
    <div id="c">C</div> 
    <div id="d">D</div> 
    <div id="e">E</div> 
</div>