title: Is there a way to make one function stop all the other functions?
body: <p>I want only one of these functions to run at a time. Is there a way to stop executing a function while continuing another?</p>
  
  <p>For example, If function "do_move_right()" is currently executing, I want to be able to press a button that makes the function stop executing and start executing function "do_move_left()".</p>
  
  <p>CODE:</p>
  
  <pre><code>function do_move_right() {
      sheepr = document.getElementById('sb');
      mover = sheepr.style.left;
      mover = parseInt(mover.substring(0,mover.length-2));
  
  
      mover += 10;
      sheepr.style.left = (mover)+'px';
  
  
      if (mover &lt; 940) {
  
        window.setTimeout(function() {
          do_move_right('sb');
        }, 250);
      }
  }
  
  function do_move_left() {
      sheepl = document.getElementById('sb');
      movel = sheepl.style.left;
      movel = parseInt(movel.substring(0,movel.length-2));
  
  
      movel -= 10;
      sheepl.style.left = (movel)+'px';
  
  
      if (movel &lt; 940) {
  
        window.setTimeout(function() {
          do_move_left('sb');
        }, 250);
      }
  }
  
  function do_move_up() {
      sheepu = document.getElementById('sb');
      moveu = sheepu.style.top;
      moveu = parseInt(moveu.substring(0,moveu.length-2));
  
  
      moveu -= 10;
      sheepu.style.top = (moveu)+'px';
  
  
      if (moveu &lt; 940) {
  
        window.setTimeout(function() {
          do_move_up('sb');
        }, 250);
      }
  }
  
  function do_move_down() {
      sheepd = document.getElementById('sb');
      moved = sheepd.style.top;
      moved = parseInt(moved.substring(0,moved.length-2));
  
  
      moved += 10;
      sheepd.style.top = (moved)+'px';
  
  
      if (moved &lt; 940) {
  
        window.setTimeout(function() {
          do_move_down('sb');
        }, 250);
      }
  }
  </code></pre>