foreach 루프 내에서 setTimeout 함수를 중단하십시오.

페이지로드시 시작되는 setTimeout 함수를 중단하려고합니다. 그래서 내가 여기서하고있는 일은, 버튼을 클릭하면 true로 flag 값을 만들고 setTimeout은 깨지지 않아서 여기서 일어나지 않습니다. 이 setTimeout 함수는 각 루프에 있습니다. 아래는 제 코드입니다.foreach 루프 내에서 setTimeout 함수를 중단하십시오.

   rData[0].dt.forEach(function(d, i) { 
        setTimeout(function() { 
         if(flag === "false"){ 
          console.log(flag); 
          reserRadius(i); //here I am changing radius of circle 
         }else{ 
          console.log(flag); 
          clearTimeout(); 
          return; 
         } 

        }, i * 2000); 
       });

출처

2016-08-11 shanky

'clearTimeout'는 ID가 setTimeout''에서 반환,하지만 당신은 시간에 의해 함수가 시간 제한 평가 있기 때문에, 이해가되지 않습니다이 경우 이미 예상 완료되었고'clearTimeout'을 호출 할 이유가 없습니다 –

코드가 정확히 원하는 것을 명확히 알 수 없습니다. 실행될 때 이미 제거되었으므로 자체 내부에서'timeout'을 제거 할 수 없습니다. 질문에 [JSFiddle] (https://jsfiddle.net/) 스 니펫을 게시하는 것이 유용 할 것입니다. –

이 setTimeout 함수 내에서 실행되는 애니메이션 코드가 있습니다. 특정 지역 위로 마우스를 가져 가면이 애니메이션이 멈추기를 바란다. 그래서 버튼을 사용하여 멈추려 고한다. – shanky

모든 제한 시간을 한 번에 만드는 대신 필요한 경우에만 시간 제한을 만듭니다.

(function repeat(list, i) { 
    if (i >= list.length) return; // nothing (more) to do 
    var d = list[i]; // do you need d at all?? 
    setTimeout(function() { 
     if(flag === "false"){ 
      console.log(flag); 
      reserRadius(i); //here I am changing radius of circle 
      repeat(list, i+1); // schedule next timeout only now. 
     }else{ 
      console.log(flag); 
      // Don't schedule next timeout. This breaks the "loop". 
     } 
    }, 2000); // trigger 2 seconds from now. Note: no multiplying anymore. 
})(rData[0].dt, 0); // pass initial values: the array and index.

을 코드의 버전에서는이 ID 모든 setTimeout 호출에 의해 반환 값을 유지해야 할 것, 그리고이 방법은 당신이 중지하기로 결정 때 그들 중 하나를 취소 할 필요는 없습니다 그들 모두를 (또는 적어도 나머지 것들은) 하나씩 차례대로 clearTimeout으로 전달하십시오. 이렇게하면 코드가 복잡해질 수 있습니다. 위의 방법이보다 효율적인 방법이라고 생각합니다.

출처

2016-08-11 20:30:30 trincot

콜백 자체에서 setTimeout을 중지 할 수 없습니다. setTimeout 은 clearTimeout에 전달할 수있는 timeoutId를 반환하며, 은 해당 타이머를 중지합니다.

이러한 모든 타이머를 중지하는 한 가지 방법은 timeoutIds 배열을 만들고 다음과 같이 변경하는 것입니다.

var timerIds = []; 
rData[0].dt.forEach(function(d, i) { 
    timerIds.push(setTimeout(function(){ 
     if(flag === "false"){ 
      console.log(flag); 
      reserRadius(i); //here I am changing radius of circle 
     } 
     else{ 
      console.log(flag); 
     } 
    }, i * 2000)); 
}); 

function stopTimeouts(){ 
    timerIds.forEach(function(id){ 
     clearTimeout(id); 
    } 
} 
function codeThatMightChangeFlag(callback) { 
    // do a bunch of stuff 
    if (condition happens to change flag value) { 
     // call the callback to notify other code 
     stopTimeouts(); 
    } 
}

은 참조 : Clear array of setTimeout's 및 Javascript - wait until flag=true

출처

2016-08-11 21:16:01

foreach 루프 내에서 setTimeout 함수를 중단하십시오.

답변

관련 문제