title: Simulate clearTimeout() action within a setTimeout() function
body: <p>Normally the execution of a setTimeout() method is aborted by a clearTimeout() method that is outside of the setTimeout() method, but in my situation I need to abort the execution of a setTimeout() loop within the loop itself if a certain event occurs during the designated "waiting period".  </p>
  
  <p>In my code shown below, the user gets 500 milliseconds to activate Code A.  If he fails to activate Code A within the time frame, Code B will be executed as a fallback.  Within Code A I have marked two places:  1) the place to stop the timeout and 2) the place where I wish to exit the function.</p>
  
  <p>My <a href="http://jsfiddle.net/Wagtail/b6Juh/16/" rel="nofollow">jsFiddle is here</a>.</p>
  
  <p>A copy of my JavaScript and HTML codes is shown below:</p>
  
  <p><em><strong>HTML</em></strong></p>
  
  <pre><code>&lt;table id="headMenu"&gt;
      &lt;tr&gt;
          &lt;td id="head1"&gt;Item 1&lt;/td&gt;
          &lt;td id="head2"&gt;Item 2&lt;/td&gt;
          &lt;td id="head3"&gt;Item 3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table id="subMenu"&gt;
      &lt;tr&gt;
          &lt;td&gt;Dynamic Content!&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table​​​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;​​​
  </code></pre>
  
  <p><em><strong>JavaScript</em></strong></p>
  
  <pre><code>a = 500;
  document.getElementById("head1").onmouseover = function(displayMenu) {
      document.getElementById("subMenu").innerHTML = "&lt;tr&gt;&lt;td&gt;Item A&lt;/td&gt;&lt;td&gt;Item B&lt;/td&gt;&lt;td&gt;Item C&lt;/td&gt;&lt;/tr&gt;";
      document.getElementById("head1").onmouseout = function(getScroll) {
          setTimeout(function() {
              document.getElementById("subMenu").onmouseover = function(breakTimeout) { // **Code A**
                  a = 10000;
                  // **Stop timeout.**  Now never execute Code B.
                  document.getElementById("subMenu").onmouseout = function(endFunction) {
                      document.getElementById("subMenu").innerHTML = '&lt;tr&gt;&lt;td&gt;Content is Dynamic!&lt;/td&gt;&lt;/tr&gt;';
                      // **Exit function here immediately**
                  }
              }
              if(a==500){
              //**Code B**:  Only execute if **Code A** never executed within time frame
                  document.getElementById("subMenu").innerHTML = '&lt;tr&gt;&lt;td&gt;Dynamic Content!&lt;/td&gt;&lt;/tr&gt;';
              }
          }, a)
      }
  }​
  </code></pre>
  
  <p>I hope the concept of my design is also evident.  If my code and description is not clear enough, I'll be glad to clarify further questions.</p>
  
  <p>Thanks a lot and +1 to anybody who can get the answer!</p>