javascript 고급 타이머_javascript 기술에 대한 자세한 설명

setTimeout() 및 setInterval()을 사용하여 타이머를 만들 수 있으며, 여기서는 기본적인 사용법을 소개하지 않습니다. 여기서는 주로 자바스크립트의 코드큐를 소개합니다. JavaScript의 코드는 즉시 실행되지 않으며 프로세스가 유휴 상태가 되자마자 실행됩니다. 따라서 타이머에 설정된 시간은 실행 시간이 일치해야 한다는 의미가 아니라, 지정된 시간 간격 이후에 대기하도록 코드가 큐에 추가된다는 의미입니다. 이 시점에서 큐에 아무것도 없으면 이 코드가 실행되며, 정확하게 지정된 시점에 코드가 실행된 것처럼 나타납니다. 그래서 몇 가지 문제가 발생할 것입니다.

반복 타이머

보통 우리는 동일한 시간 간격으로 특정 코드 조각을 반복적으로 실행하기 위해 setInterval 메소드를 사용합니다. 그러나 이 방법을 사용하는 데에는 두 가지 문제가 있습니다. 첫 번째는 일부 간격을 건너뛰는 것이고, 두 번째는 여러 타이머에 대한 코드 실행 간격이 예상보다 작을 수 있다는 것입니다.
여기 예를 들어 보겠습니다. onclick 이벤트 핸들러가 setInterval을 사용하여 200ms 간격으로 반복 타이머를 설정하는 경우 이벤트 핸들러가 완료하는 데 300ms가 걸리면 시간 간격을 건너뛰고 타이머 코드를 실행합니다.
다음 코드를 통해서도 결론을 얻을 수 있습니다.

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题，我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

함수가 실행될 때마다 새 타이머가 생성됩니다. 두 번째 setTimeout 호출은 인수.callee를 사용하여 현재 실행되는 함수에 대한 참조를 얻고 이에 대한 다른 타이머를 설정합니다. 이는 이전 타이머 코드가 실행될 때까지 새 타이머 코드가 대기열에 삽입되지 않도록 수행되며, 누락된 간격이 없고 다음 타이머 코드가 실행되기 전에 최소한 지정된 시간이 대기되도록 보장합니다. 연속 실행을 피하기 위한 간격입니다. 요즘 주류 프레임워크의 애니메이션은 일반적으로 이런 방식으로 반복 타이밍을 구현합니다.

기능 조절

타이머는 타이밍을 맞추는 데 사용될 뿐만 아니라 브라우저에 가해지는 압력을 완화하는 데에도 사용할 수 있습니다. 브라우저의 일부 계산 및 처리 비용은 다른 것보다 훨씬 비쌉니다. 예를 들어 DOM 작업에는 더 많은 메모리와 CPU 시간이 필요합니다. 너무 많은 DOM 작업을 계속 사용하면 브라우저가 중단되거나 충돌이 발생할 수 있습니다.
함수 조절의 기본 아이디어는 특정 코드가 중단 없이 계속해서 반복적으로 실행될 수 없다는 것입니다. 함수가 처음 호출되면 지정된 간격 후에 코드를 실행하도록 타이머가 생성됩니다. 함수가 두 번째 호출되면 이전 타이머를 지우고 타이머를 설정합니다. 기능 실행 요청이 일정 시간 동안 중단된 후 해당 기능을 다시 실행하는 것이 목적입니다.
코드는 다음과 같습니다.

//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}
//该函数接受两个参数，第一个是要执行的函数，第二个是作用域。
//使用方法demo
//未使用情况：
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情况;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代码是周期性执行的，都应该使用节流。

이는 사용자에게 좋은 느낌을 주지는 않지만 브라우저에 대한 부담을 많이 줄여줍니다. 함수 조절 역시 많은 프레임워크에서 일반적으로 사용되는 기술 중 하나입니다.

이상은 JavaScript 고급 타이머에 대한 관련 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.