다음과 같은 재귀 루프 기능이있는 클래스가 있습니다.
class Foo {
private isLoopOnFlg: boolean = false;
public StartLoop() {
this.isLoopOnFlg = true;
this.recursiveLoopWithDelay(() => {
// Modifying DOM objects
}, 1000);
}
public StopLoop() {
this.isLoopOnFlg = false;
}
// THE PROBLEM
private recursiveLoopWithDelay(loopFn: any, delay: number) {
let stamp = Date.now();
// How do I stop the loop using `isLoopOnFlg`?
function _loop() {
if (Date.now() - stamp >= delay) {
loopFn();
stamp = Date.now();
}
window.requestAnimationFrame(_loop);
}
window.requestAnimationFrame(_loop);
}
}
보시다시피 함수 recursiveLoopWithDelay가 중지되지 않습니다. 새 개인 변수를 추가했고 isLoopOnFlg이를 사용하여 재귀 함수를 중지하고 싶습니다.하지만 어떻게해야할지 모르겠습니다. keepLoopFlg다음과 같이 함수에 새 매개 변수 를 추가하여 함수를 중지하려고했습니다 .
...
private recursiveLoopWithDelay(loopFn: any, delay: number) {
let stamp = Date.now();
// Added a new param `keepLoopFlg` but it's not changed when `StopLoop()` is called
function _loop(keepLoopFlg: boolean) {
if (keepLoopFlg && Date.now() - stamp >= delay) {
loopFn();
stamp = Date.now();
}
window.requestAnimationFrame(_loop.bind(this, this.isLoopOnFlg)); // Used `.bind(...)`
}
window.requestAnimationFrame(_loop.bind(this, this.isLoopOnFlg));
}
...
그러나 위의 코드는 내가 원하는대로하지 않습니다. StopLoop()호출 될 때 재귀 함수는 계속 진행됩니다 (메모리 누수). 현재 구조로 재귀 함수를 중지하고 메모리 누수를 방지하는 방법을 배우고 싶습니다. 저를 깨달으십시오!
첫째, 콜백을 직접 호출하는 대신 이벤트 루프에서 콜백을 큐에 넣기 때문에 실제로 재귀 적이 지 않습니다. 따라서 호출 스택의 메모리 부족에 대해 걱정할 필요가 없습니다.
requestAnimationFrame 호출을 중지하려면 호출하지 마십시오. 문제는 언제 전화를 끊으시겠습니까? 다른 사람에게 유틸리티 기능을 제공하는 경우 일반적으로 업데이트를 "구독 취소"하거나 중지 할시기를 지정하게합니다.
private recursiveLoopWithDelay(loopFn: any, delay: number) {
const self = this;
let stamp = Date.now();
function _loop() {
// If we aren't looping anymore, just exit the code.
// Don't requeue requestAnimationFrame
if (!self.isLoopOn) {
return;
}
if (Date.now() - stamp >= delay) {
loopFn();
stamp = Date.now();
}
window.requestAnimationFrame(_loop);
}
window.requestAnimationFrame(_loop);
}
여기에서 한 것처럼 Lexical 범위를 사용하여 바인딩을 건너 뛸 수도 있습니다. 언제든지 조회 할 수 this있는 변수에 저장 self합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다