함수가 여전히 수행중인 작업 동안 콜백 중지

Question

질문 : 함수가 이전에 수행 한 작업을 수행하면서 콜백을 무시하고 다시 시작하지 못하게 할 수 있습니까?

두 가지 기능이 있습니다. 함수 # 1은 자체에 대한 콜백이있는 setTimeout을 사용하여 오디오 파일을 트리거합니다. Math.round(Math.random() * aStartMax) + aStartMin;을 사용하여 다소 임의의 시간에 루프에서 사운드를 시작합니다. 기능 # 2은 완료하는 데 일정 시간이 걸리는 시각적 애니메이션을 수행합니다. 현재 소리가 함수 # 1에 의해 트리거 될 때마다 콜백은 함수 # 2를 실행하여 시각적 애니메이션을 수행합니다. 문제는 함수 # 1이 함수 # 2 애니메이션이 완료되는 데 필요한 것보다 더 큰 빈도로 소리를 발사하므로 애니메이션이 시작점으로 점프하는 (글리치가 나는 것처럼 보임) 점에서 발생합니다. 함수 # 1 실행 빈도를 늦추고 싶지 않습니다. 함수 # 2가 이미 실행중인 경우 수신하는 콜백을 무시하기 만하면됩니다. 이것이 가능한가? 그 방법으로 소리는 어떤 주파수에서도 발사 될 수 있지만 시각 애니메이션은 현재 움직이지 않는 경우에만 실행됩니다.

// FUNCTION #1: Audio function 
(function loop() { 

    var rand = Math.round(Math.random() * aStartMax) + aStartMin; 

    setTimeout(function() { 
     playDuration = Math.floor((Math.random() * aPlayDurationMax) + aPlayDurationMin); 

     setTimeout(function() { 
      var sound = new Howl({ 
       src: [soundFileName], 
       autoplay: true, 
       loop: true, 
       volume: (Math.random() * 0.8) + aVolumeMin, 
       fade: 0 
      }); 

      var id2 = sound.play(); 
      sound.fade(0, 1, aFadeIn, id2) 
      { 
       do_the_thing($('.a')); // << callback for function #2 
      }; 

      setTimeout(function() { 
       sound.fade(1, 0, aFadeOut, id2); 
      }, playDuration); 

     }, aWaitToPlay); 

     loop(); // calls the audio function to execute again 
    }, rand); 
}()); 

// FUNCTION #2: Visual function 
function do_the_thing($elements) { 
    var delay = $elements.children().length * universalBoxTime; 
    setTimeout(function() { 
     $elements.makisu('toggle'); 
     $elements.makisu({ 
      selector: 'dd', 
      overlap: .7, 
      speed: 2 
     }); 
    }, 0); 
} 

나는 다음과 같은 setTimeout 내 2 기능을 설정할 수 있습니다 읽었습니다. 그러나 함수가 새로운 콜백을 무시하거나 삭제할 수 있다고 생각하지는 않지만 나중에 콜백 할 것이므로 간단하게 호출 할 것입니다.

function yourfoo() { 
// code 
setTimeout(yourfoo, 3000); 
} 

setTimeout(yourfoo, 3000); 

Answer 1

기능 (또는 콜백)이 해당 정보를 자체적으로 저장하여 저장할 수 있습니다. (? 경과 어쩌면 delay 후) 나는 기능 # 2가 수행 정확히 모르겠지만, 여기에 예입니다 :

function do_the_thing() { 

    if (do_the_thing.running) return; 
    do_the_thing.running = true; 

    // your code 

    setTimeout(() => do_the_thing.running = false, 1000); 

} 

이것은 너무 do_the_thing의 실제 함수 본문이 한 번 두 번째의 최대 실행하는 것은 . 이상적으로 do_the_thing이 실제로 실행되면 do_the_thing.running = false을 설정하는 것이 좋습니다.

Answer 2

콜백 함수 2가 실행중인 경우 변수에 콜백 함수 2의 상태를 저장합니다. 그럴 경우 실행하지 마십시오. 그렇지 않은 경우 실행하십시오. 아래 의사 코드 확인

var isRunning = false; 

if(!isRunning) { 
    // callback function 2 
} 

function callback2() { 
// execute it 
isRunning = false; 
}