在 setTimeout() 函数中模拟 clearTimeout() 动作

Question

通常 setTimeout() 方法的执行被 setTimeout() 方法之外的 clearTimeout() 方法中止，但在我的情况下，我需要在循环本身中中止 setTimeout() 循环的执行如果某个事件在指定的“等待期”内发生。

在下面显示的代码中，用户有 500 毫秒的时间来激活代码 A。如果他未能在时间范围内激活代码 A，代码 B 将作为后备执行。在代码 A 中，我标记了两个地方：1）停止超时的地方和 2）我希望退出函数的地方。

我的jsFiddle is here。

我的 JavaScript 和 HTML 代码的副本如下所示：

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)
    }
}​

我希望我的设计理念也很明显。如果我的代码和描述不够清楚，我很乐意澄清更多问题。

非常感谢任何可以得到答案的人并 +1！

Answer 1

你原来的前提是有缺陷的。传递给setTimeout() 的函数体直到时间过去后才会执行，因此您想要停止超时的代码不会执行，直到为时已晚。我已修改您的代码以使用标准 clearTimeout()，它应该可以满足您的需求。

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

Answer 2

可以使用全局变量来存储setTimeout()的返回值

window.myTimeout = setTimeout(function() {
    // ...
}, a);

然后您可以像这样从任何上下文中清除超时（只要 window.myTimeout 没有被修改）：

clearTimeout(window.myTimeout);

注意：“窗口”部分是可选的。这只是我个人用来简化识别全局变量的约定，尤其是在代码复杂/庞大的情况下。