JS 애니메이션 타이머 지식 요약

이 글은 JS 애니메이션에서 타이머의 사용법과 관련 지식 포인트를 정리한 글입니다. 도움이 필요한 친구들이 참고할 수 있습니다.

넓게 말하자면, js를 통해 변경된 모든 시각적 표현을 애니메이션이라고 합니다. 예를 들어 버튼, 링크 및 기타 요소에 대한 대화형 피드백입니다.

좁은 의미에서는 요소 속성을 변경하기 위해 타이머를 통해 js 함수를 지속적으로 호출하여 생성되는 시각적 애니메이션 효과입니다.

Timer

Timer는 JavaScript 애니메이션의 핵심 기술입니다.

setTimeout(), setInterval()은 과거에도 잘 알려져 있었고

보통 보조 역할을 합니다.

조심하세요. 현상이 나타날 수 있습니다. 다른 탭에서 루프 애니메이션이 있는 페이지로 전환하면 지연이 발생하고 프레임 전환이 빨라집니다.

문제는 내부 작동 메커니즘에 있습니다.

setTimeout의 첫 번째 매개변수를 이해하세요

권장됩니다. 함수 형식을 사용하려면 문자열 형식이 두 번 구문 분석되며 eval과 동일한 문제가 있습니다.

두 개 이상의 매개변수가 있을 수 있습니다. 예 1을 참조하세요.

이것은 문제를 나타냅니다. 예 2를 참조하세요. ;

반환 값은 정수입니다.

setInterval,clearInterval은 위와 동일합니다.

setTimeout(function(a,b){ 
 console.log(a+b); 
},1000,1,1)；

예 2:

var a = 0;
function foo(){
 console.log(this.a);
};
var obj = {
 a : 2,
 foo:foo
}
setTimeout(obj.foo,100);

예:

이유: 대기열에 참여하여 실행을 차단합니다.

setTimeout 범례:

setTimeout(function(){ 
 console.log(1); 
}); 
console.log(0);

<p id="myp" style="height: 100px;width: 100px;background-color: pink;"></p>
<script>
myp.onclick = function(){
 setTimeout(function(){
  alert(0);
 })
}
document.onclick = function(){
 alert(1);
}
</script>

requestAnimationFrame 이해

사용법은 setTimeout과 유사하지만 시간 매개변수가 필요하지 않습니다.

raf는 간단하고 호환 가능합니다

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
 setTimeout(function(){
  myInput.value = myInput.value.toUpperCase();
 });
}
</script>

위 내용은 미래에 모든 사람에게 도움이 되기를 바랍니다. .

관련 기사:

다중 매개변수 전달을 위한 Ajax 구현 코드

사용자 이름과 비밀번호 확인을 위한 Ajax 예제 코드

위 내용은 JS 애니메이션 타이머 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!