Question

我用setTimeout来传递动作。还有一点（可能是任何时候）我想暂停一下。我看过其他人在这里写的。但是不能轻易理解。有人可以给我一些建议吗？谢谢。

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';
}

Answer 1

这样的东西？

<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>

javascript暂停该功能

1 个答案: