title: JavaScript cancel function
body: <p>I have some code where I have a timer. Every 3 seconds the background changes colors, and when you hover the stop button, the color changer pauses, I have an onclick event that i am using in junction with the mouseout event but the mouseout event cancels out my onclick event. What can I do so that the onclic event works still after I move the mouse from the stop button?</p>
  
  <p>Code: <a href="http://jsfiddle.net/8Usbx/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>&lt;script&gt;
  var colors = new Array();
  colors[0] = "green";
  colors[1] = "blue";
  colors[2] = "gray";
  var i = 0;
  var timer;
  
  function changeOfPlans() {
      timer = setInterval("colorChange()", 3000);
  }
  
  function colorChange() {
      document.getElementById("one").style.backgroundColor = colors[i];
      document.getElementById("two").style.backgroundColor = colors[i];
      i++;
      if (i == 3 || i &gt; 3) {
          //start over by setting i to 0
          i = 0;
      }
  }
  
  function stop() {
      clearTimeout(timer);
  }​
  &lt;/script&gt;
  </code></pre>