Question

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

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.

My jsFiddle is here.

A copy of my JavaScript and HTML codes is shown below:

HTML

<table id="headMenu">
    <tr>
        <td id="head1">Item 1</td>
        <td id="head2">Item 2</td>
        <td id="head3">Item 3</td>
    </tr>
</table>
<table id="subMenu">
    <tr>
        <td>Dynamic Content!</td>
    </tr>
</table​​​​​​​​​​​​​​​​​​​​​​​​​​​​>​​​

JavaScript

a = 500;
document.getElementById("head1").onmouseover = function(displayMenu) {
    document.getElementById("subMenu").innerHTML = "<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>";
    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 = '<tr><td>Content is Dynamic!</td></tr>';
                    // **Exit function here immediately**
                }
            }
            if(a==500){
            //**Code B**:  Only execute if **Code A** never executed within time frame
                document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
            }
        }, a)
    }
}​

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.

Thanks a lot and +1 to anybody who can get the answer!

Answer 1

Your original premise was flawed. The body of the function passed to setTimeout() doesn’t execute until after the time has elapsed, so the code you wanted to stop the timeout wouldn’t be executed until it was too late. I’ve modified your code to use a standard clearTimeout() which should do what I think you want.

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout;

head1.onmouseover = function(displayMenu) {
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>';
    head1.onmouseout = function(getScroll) {
        subMenu.onmouseover = function(breakTimeout) {
            clearTimeout(timeout);
            subMenu.onmouseout = function(endFunction) {
                subMenu.innerHTML = '<tr><td>Content is Dynamic!</td></tr>';
            };
        };
        timeout = setTimeout(function() {
            document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
        }, a);
    };
};

Working DEMO