페이지가 포커스를 잃으면 브라우저는 페이지를 다시 렌더링하지 않지만 설정타임아웃/설정간격 요청은 중지되지 않고 대기열에 애니메이션이 계속 쌓이기 때문입니다. 페이지가 다시 포커스를 확보하면 애니메이션 대기열에 이미 명령이 쌓여 있으므로 애니메이션이 지저분해질 수 있습니다.
일반적으로 현재 관행은 요청 애니메이션 프레임 함수를 사용하는데, 요청 애니메이션 프레임은 시간 매개 변수를 허용하지 않고 브라우저의 렌더링 프레임에 의해 함수 실행 빈도가 결정되므로 애니메이션 혼동을 피하기 위해 브라우저에 의해 결정되는 애니메이션 대기열을 달성할 수 있습니다. 물론 기성 회전 플러그인을 사용할 수도 있고, 본문에 바이두를 사용할 수도 있습니다. 다음은 set타임아웃과 요청애니메이션프레임의 사용법을 설명하는 비교 예시입니다.
// setTimeout을 사용하여 콘솔을 반복하여 hello? world를 출력
function?fun(){
console.log('hello? World');
setTimeout(function(){
fun();
},3000);
}
fun(); //3000밀리초마다 hello. world를 재귀적으로 출력할 수 있는 fun 함수를 실행합니다. >
// 요청 애니메이션 프레임을 사용하여 콘솔에 hello. world를 재귀적으로 출력
function?fun(){
console.log('hello? World');
requestAnimationFrame(function(){
fun();
})
}
Fun()//3000ms마다 hello를 재귀적으로 출력할 수 있는 Fun 함수를 실행합니다. World
// 요청AnimationFrame에는 시간 매개변수가 없으므로 간격을 직접 제어할 수 없습니다.
// 하지만 인위적으로 실행 간격을 다음과 같이 제한할 수 있습니다.
Function? Fun(last){
If (new? Date(). getTime()? -? Last? & gt?3000){
console.log('Hello? World');
requestAnimationFrame(function(){
fun(New? Date(). getTime());
})
}Otherwise{
requestAnimationFrame(function(){
Fun (last)
});
}
}
Fun (New? Date(). getTime())
이것은 3000밀리초마다 hello를 출력하도록 requestAnimationFrame의 간격을 설정합니다. world// 가끔 C와 자바 웹에서 파이썬을 작성하기 때문에 세미콜론이 약간 지저분해서 사과드립니다.