이 글은 JS 애니메이션에서 타이머의 사용법과 관련 지식 포인트를 정리한 글입니다. 도움이 필요한 친구들이 참고할 수 있습니다.
넓게 말하자면, js를 통해 변경된 모든 시각적 표현을 애니메이션이라고 합니다. 예를 들어 버튼, 링크 및 기타 요소에 대한 대화형 피드백입니다.
좁은 의미에서는 요소 속성을 변경하기 위해 타이머를 통해 js 함수를 지속적으로 호출하여 생성되는 시각적 애니메이션 효과입니다.
Timer는 JavaScript 애니메이션의 핵심 기술입니다.
setTimeout(), setInterval()은 과거에도 잘 알려져 있었고
보통 보조 역할을 합니다.
조심하세요. 현상이 나타날 수 있습니다. 다른 탭에서 루프 애니메이션이 있는 페이지로 전환하면 지연이 발생하고 프레임 전환이 빨라집니다.
문제는 내부 작동 메커니즘에 있습니다.
권장됩니다. 함수 형식을 사용하려면 문자열 형식이 두 번 구문 분석되며 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);
예:
rreee이유: 대기열에 참여하여 실행을 차단합니다.
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>
사용법은 setTimeout과 유사하지만 시간 매개변수가 필요하지 않습니다.
메커니즘은 완전히 다릅니다: 1, setTimeout은 비동기 작업이며 작업 대기열(이벤트 루프)에 참여합니다. js 엔진 스레드의 동기화 코드가 실행될 때 실행을 위해 작업 대기열에서 꺼내집니다. 2, raf는 사용자 에이전트(브라우저)가 애니메이션용으로 특별히 개발한 인터페이스입니다. 사용자 에이전트는 적절한 빈도(일반적으로 모니터 새로 고침 빈도, 1000/60ms와 동일)로 애니메이션 프레임을 업데이트하고 프레임을 중지합니다. CPU 리소스를 절약하기 위한 숨겨진 페이지 또는 비활성 페이지 업데이트 3, raf 예제raf는 간단하고 호환 가능합니다
<input type="text" id="myInput"> <script> myInput.onkeypress = function(event) { setTimeout(function(){ myInput.value = myInput.value.toUpperCase(); }); } </script>
위 내용은 미래에 모든 사람에게 도움이 되기를 바랍니다. .
관련 기사:
AJAX의 원리 - 비동기 및 부분 새로 고침을 달성하는 방법사용자 이름과 비밀번호 확인을 위한 Ajax 예제 코드
위 내용은 JS 애니메이션 타이머 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!