在setTimeout（）函数内模拟clearTimeout（）动作 [英] Simulate clearTimeout() action within a setTimeout() function

问题描述

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

在下面显示的代码中，用户获取500毫秒来激活代码A.如果他在时间范围内未能激活代码A，则代码B将作为倒退。在代码中，AI有两个地方：1）停止超时的地方，2）我希望退出函数的地方。

My jsFiddle在这里。

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

HTML

 < table id =headMenu> 
< tr> 
< td id =head1>第1项< / td> 
< td id =head2>第2项< / td> 
< td id =head3>第3项< / td> 
< / tr> 
< / table> 
< table id =subMenu> 
< tr> 
< td>动态内容！< / td> 
< / tr> 
< / table> 
  

JavaScript

  a = 500; 
 document.getElementById（head1）。onmouseover = function（displayMenu）{
 document.getElementById（subMenu）。innerHTML =< tr>< td> Item A< / td> < td>项目B< / td>< td>项目C< / td>< / tr>; 
 document.getElementById（head1）。onmouseout = function（getScroll）{
 setTimeout（function（）{
 document.getElementById（subMenu）。onmouseover = function（breakTimeout）{ // **代码A ** 
a = 10000; 
 // **停止超时。**现在从不执行代码B. 
 document.getElementById（subMenu）。onmouseout = function （endFunction）{
 document.getElementById（subMenu）。innerHTML ='< tr>< td> Content is Dynamic！< / td>< / tr>'; 
 // **立即在此处退出函数** 
} 
} 
 if（a == 500）{
 // **代码B **：仅在**代码A **从未在时间范围内执行
 document.getElementById（subMenu）。innerHTML ='< tr>< td> Dynamic Content！< / td>< / tr>'; 
 } 
}，a）
} 
} 
  

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

非常感谢您的支持！ / p>

解决方案

您的原始前提是有缺陷的。传递给 setTimeout（）的函数的主体直到时间过去后才会执行，所以要停止超时的代码将不会执行，直到它为时已晚。我修改了你的代码来使用标准的 clearTimeout（），它应该做我认为你想要的。

  var a = 500，head1 = document.getElementById（'head1'），subMenu = document.getElementById（'subMenu'），timeout; 
 
 head1.onmouseover = function（displayMenu）{
 subMenu.innerHTML ='< tr>< td>项目A< / td>< td>项目B< / td> < td>项目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）; 
}; 
}; 
  

工作DEMO

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!

解决方案

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

这篇关于在setTimeout（）函数内模拟clearTimeout（）动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！