JavaScript로 Timed 루프를 취소 하시겠습니까?

Question

JavaScript에 함수를 설정하여 페이드 인하거나 내 페이지의 일부 요소를 페이드 아웃하려고합니다. 페이드 자체가 잘 작동하지만, 내 문제는 그들 중 하나가 다른 하나의 작업을 취소하려고 할 때 발생합니다.

//I know this is ugly, I'm just learning JavaScript again and plan to recode it after I learn some more... 
var fadeOut = false 

//set out to true to fade out, false to fade in 
function fade(out) { 
    var steps = 1 
    var outSpeed = 100 
    var inSpeed = 10 
    var timer = 0 

    if (out) { 
      //fade out 
      fadeOut = true 
      for (var i=100; i>=0; i-=steps) { 
        if (fadeOut) { 
          setTimeout("set_el_opacity(" + (i/100) + ")", 
          timer+=steps 
        } else { 
          break; 
        } 
      } 
    } else { 
      //fade in 
      fadeOut = false 
      for (var i=0; i<=100; i+=steps) { 
        if(!fadeOut) { 
          setTimeout("set_el_opacity(" + (i/100) + ")", 
          timer+=steps 
        } else { 
          break; 
        } 
      } 
    } 
} 

이제 페이드 아웃 그들이 그것을 목적에 알고 있도록 천천히 페이드 아웃보고 내가 사용자를 원한다. 페이드보다 느리게 실행 한 다음 요소가 필요한 경우 다시 신속하게 페이드로 설정 (필요할 때 화면에서 약간의 혼란을 제거하십시오).

fade (true)가 잘 작동하고 fade (false)가 잘 작동하고 빠릅니다. 내 문제는 내가 fade (true)를 호출하고 바로 fade (false)를 호출 할 때 발생합니다. 페이드 (fade) 호출은 더 빠르게 실행되기 때문에 먼저 페이드 (fade) (false) 콜이 진행되어 완전히 페이드 아웃 (fade out)됩니다.

내 질문은 : 페이드 (false) 호출을 수행하면 페이드 (true) 호출의 루프를 취소 할 수 있습니까?

이

mytime = setTimeout('function()', 1000); 

당신 사항 clearTimeout를 사용하여 취소 할 수 있습니다 :

clearTimeout(mytime); 

Answer 1

시작하려면 많은 타이머를 반복적으로 실행하는 것은 좋지 않습니다. 대신 setInterval을 사용하거나 setTimeout 처리기의 새 타이머를 시작해야합니다.

또 다른 접근법은 일정한 간격으로 발사하고 모든 보류중인 효과를 관리하는 단일 타이머를 갖는 것입니다. 프레임 속도를 결정하고 타이머 ("타이머 스택")를 무기한으로 실행하여 매 프레임마다 "똑딱 거리며 표시"할 수 있습니다. 보류중인 효과가없는 경우 선택 사항으로 시작/중지 할 수 있습니다. TIMEOUT LOOP를 처리 할

Answer 2

. 시간 초과에 대한 자세한 내용은 this article을 확인하십시오. 다음은 제공 한 코드를 기반으로 한 간단한 예입니다.

var timeoutId = null; 

function fade(out) { 
    // ... 
    // Your variable declarations 
    // ... 

    // Cancel the active timeout, if any. 
    clearTimeout(timeoutId); 

    // Record the timeout ID inside your if-else blocks 
    if (out) { 
     // ... 
     timeoutId = setTimeout(...); 
     // ... 
    } else { 
     // ... 
     timeoutId = setTimeout(...); 
     // ... 
    } 
} 

Answer 3

당신은 fade()이 clearTimeout() 기능을 사용하여 호출 될 때마다 활성 타임 아웃을 취소해야 당신이 타이머를 설정

Answer 4

SIMPLIEST WAY

function myFunc (terminator = false) { 
    if(terminator) { 
     clearTimeout(timeOutVar); 
    } else { 
     // do something 
     console.log("loop"); 
     timeOutVar = setTimeout(function(){myFunc();}, 1000); 
    } 
} 
myFunc(true); // -> start loop 
myFunc(false); // -> end loop