setTimeout() 함수 내에서 clearTimeout() 액션을 시뮬레이트합니다.

Question

일반적으로 setTimeout() 메소드의 실행은 setTimeout() 메소드 외부에있는 clearTimeout() 메소드로 중단되지만, 제 상황에서는 중단해야합니다. 지정된 "대기 기간"동안 특정 이벤트가 발생하면 루프 자체 내에서 setTimeout() 루프를 실행합니다.

아래에 표시된 내 코드에서 사용자는 코드 A를 활성화하기 위해 500 밀리 초를 얻습니다. 코드 프레임이 시간 프레임 내에 활성화되지 않으면 코드 B가 대체로 실행됩니다. 코드 A에서 나는 1) 제한 시간을 멈추게 할 곳과 2) 기능을 종료하고 싶은 곳이라는 두 곳을 표시했습니다.

내 jsFiddle is here.

내 자바 스크립트와 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​​​​​​​​​​​​​​​​​​​​​​​​​​​​>​​​ 

자바 스크립트

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

당신은 당신은 다음 (한 window.myTimeout이 수정되지 않는 한) 이런 모든 상황에서 타임 아웃을 취소 할 수 있습니다

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

에서는 setTimeout()의 반환 값을 저장하는 전역 변수를 사용할 수 있습니다 :

clearTimeout(window.myTimeout); 

참고 : '창'부분은 선택 사항입니다. 글로벌 변수를 쉽게 식별 할 수 있도록하기 위해 개인적으로 사용하는 컨벤션입니다. 특히 코드가 복잡하거나 거대한 경우에 특히 그렇습니다.