0

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

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

我的jsFiddle 在这里。

我的 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​​​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;​​​

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！

4

2 回答 2

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

工作演示

于 2012-06-08T13:38:50.237 回答
0

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

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

然后，您可以从任何上下文中清除超时（只要 window.myTimeout 未修改），如下所示：

clearTimeout(window.myTimeout);

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

于 2012-06-08T13:24:44.367 回答