Question

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

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

我的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);

注意：“窗口”部分是可选的。这只是我个人使用的一种惯例，可以很容易地识别全局变量，特别是如果代码很复杂/很大。

在setTimeout（）函数中模拟clearTimeout（）动作

2 个答案: