javascript pause the function

Question

I used setTimeout to passing motions. and some point(it could be any time) I would like to pause it. I have looked at other people wrote here. but couldn't understand easily. anyone can give me some advice to work it? thx.

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

You don't need a separate function for each element, define a function that accepts an argument for the selector. — Ram, Oct 22 '14 at 10:52
possible duplicate of [JavaScript,setTimeout](http://stackoverflow.com/questions/10312963/javascript-settimeout) — Unix von Bash, Oct 22 '14 at 10:55
It's not clear to me what you want to do. Please edit and describe what you want. — Ramzi Khahil, Oct 22 '14 at 11:04

score 0 · Answer 1 · answered Oct 22 '14 at 11:50

Something like this?

<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 pause the function

1 Answers1