js의 타이머 기능 사용 소개(코드 포함)

이 기사는 js의 타이머 기능 사용에 대해 소개합니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. setTimeout()

setTimeout 함수는 함수나 특정 코드가 실행된 후의 시간을 밀리초 단위로 지정하는 데 사용됩니다. 나중에 타이머를 취소하는 데 사용할 수 있는 타이머 번호를 나타내는 정수를 반환합니다.

var timerId = setTimeout(func|code, delay)

위 코드에서 setTimeout 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수 func|code는 지연할 함수 이름 또는 코드 조각이고, 두 번째 매개변수 지연은 실행을 지연할 시간(밀리초)입니다.

실행을 연기하는 코드는 문자열 형태로 setTimeout에 넣어야 한다는 점에 유의해야 합니다. 왜냐하면 엔진은 내부적으로 eval 함수를 사용하여 문자열을 코드로 변환하기 때문입니다. 연기된 실행이 함수인 경우 함수 이름을 setTimeout에 직접 넣을 수 있습니다. 한편으로 eval 함수는 보안 문제를 가지고 있으며, 다른 한편으로는 JavaScript 엔진이 코드를 최적화할 수 있도록 하기 위해 setTimeout 메소드는 일반적으로 아래와 같이 함수 이름의 형식을 취합니다.

function f(){ 
 console.log(2);
}
setTimeout(f,1000);
// 或者
setTimeout(function (){
console.log(2)
},1000);

setTimeout의 두 번째 매개변수가 생략되면 이 매개변수의 기본값은 0입니다.

처음 두 매개변수 외에도 setTimeout을 사용하면 더 많은 매개변수를 추가할 수 있습니다. 이는 지연된 함수(콜백 함수)로 전달됩니다.

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

위 코드에서 setTimeout에는 총 4개의 매개변수가 있습니다. 마지막 두 매개변수는 1000ms 이후 콜백 함수가 실행될 때 콜백 함수의 매개변수로 사용됩니다.

IE9.0 이하는 setTimeout에 두 개의 매개변수만 허용하고 더 이상의 매개변수는 지원하지 않습니다. 현재로서는 세 가지 해결책이 있습니다. 첫 번째는 익명 함수에 매개 변수를 사용하여 콜백 함수를 실행한 다음 익명 함수를 setTimeout에 입력하는 것입니다.

setTimeout(function() {
  myFunc("one","two", "three");
}, 1000);

위 코드에서 myFunc는 실제로 실행을 연기하려는 함수이며 세 개의 매개변수를 가지고 있습니다. setTimeout을 직접 입력하면 하위 버전의 IE에서는 매개변수를 사용할 수 없으므로 익명 함수에 넣을 수 있습니다.

두 번째 해결 방법은 바인딩 메서드를 사용하여 추가 매개변수를 콜백 함수에 바인딩하고 새 함수 입력 setTimeout을 생성하는 것입니다.

setTimeout(function(arg1){}.bind(undefined, 10), 1000);

위 코드에서 바인드 메소드의 첫 번째 매개변수는 정의되지 않았습니다. 즉, 원래 함수의 this가 전역 범위에 바인딩되고, 두 번째 매개변수는 원래 함수에 전달될 매개변수입니다. 실행하면 매개변수를 사용하지 않는 새 함수가 반환됩니다.

세 번째 해결 방법은 setTimeout을 맞춤설정하고 적용 메서드를 사용하여 콜백 함수에 매개변수를 입력하는 것입니다.

<!--[if lte IE 9]>
<script>(function(f){
window.setTimeout =f(window.setTimeout);
window.setInterval =f(window.setInterval);
})(function(f){
return function(c,t){
var a=[].slice.call(arguments,2);
returnf(function(){
c.apply(this,a)},t)}});
</script>
<![endif]-->

매개변수 문제 외에도 setTimeout에 관해 주의해야 할 또 다른 사항이 있습니다. setTimeout에 의해 연기된 콜백 함수가 객체의 메서드인 경우 메서드의 this 키워드는 원래 위치가 아닌 전역 환경을 가리킵니다. 정의했습니다.

var x = 1;
var o = { 
 x: 2,  y: function(){
    console.log(this.x);
  }
};
setTimeout(o.y,1000);

출력 결과: 1

위 코드는 2 대신 1을 출력합니다. 이는 o.y가 더 이상 o를 가리키지 않고 전역 환경을 가리킨다는 의미입니다.

오류를 쉽게 찾을 수 없는 또 다른 예를 살펴보세요.

function User(login) {
  this.login = login;
  this.sayHi = function(){
    console.log(this.login);
  }
}
var user = new User('John');
setTimeout(user.sayHi, 1000);

위 코드는 user.sayHi가 실행될 때 전역 객체에서 실행되므로 this.login이 값을 얻을 수 없기 때문에 undefound만 표시됩니다.

이 문제를 방지하기 위한 한 가지 해결책은 함수에서 user.sayHi를 실행하는 것입니다.

setTimeout(function() {
  user.sayHi();
}, 1000);

위 코드에서는 sayHi가 전역 범위가 아닌 사용자 범위에서 실행되므로 정확한 값이 표시될 수 있습니다.

또 다른 해결책은 바인딩 메서드를 사용하여 sayHi를 사용자에게 바인딩하는 것입니다.

setTimeout(user.sayHi.bind(user), 1000);

HTML 5 표준에서는 setTimeout의 최소 시간 간격이 4밀리초라고 규정합니다. 전력을 절약하기 위해 브라우저는 현재 창에 없는 페이지에 대해 시간 간격을 1000밀리초로 확장합니다. 또한 노트북이 배터리 전원을 사용하는 경우 Chrome 및 IE 9 이상에서는 시간 간격을 시스템 타이머(약 15.6밀리초)로 전환합니다.

2, setInterval()

setInterval 함수의 사용법은 setTimeout과 정확히 동일합니다. 유일한 차이점은 setInterval이 작업을 매번 실행해야 한다는 점입니다. 이는 예약된 실행 횟수가 무한하지 않음을 의미합니다. .

<input type="button" onclick="clearInterval(timer)"value="stop">
<script>
  var i = 1  
var timer = setInterval(function(){
    console.log(2);
  }, 1000);
</script>

위 코드는 사용자가 중지 버튼을 클릭할 때까지 1000밀리초마다 2가 출력된다는 의미입니다.

setTimeout과 동일하게 처음 두 매개변수 외에도 setInterval 메소드는 콜백 함수에 전달되는 더 많은 매개변수를 허용할 수 있습니다.

function f(){
  for (var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
}
setInterval(f, 1000, "Hello World");

웹페이지가 브라우저의 현재 창(또는 탭)에 없는 경우 많은 브라우저는 setInteral에 지정된 반복 작업을 초당 최대 한 번 실행되도록 제한합니다.

다음은 setInterval 메소드를 통해 웹페이지 애니메이션을 구현한 예입니다.

var p = document.getElementById('somep');
var opacity = 1;
var fader = setInterval(function() 
{  opacity -= 0.1;
  if (opacity >= 0) {
    p.style.opacity = opacity;
  } else {
    clearInterval(fader);
  }}, 100);

위 코드는 p 요소가 완전히 투명해질 때까지 100밀리초마다 p 요소의 투명도를 설정합니다.

setInterval의 일반적인 용도는 폴링을 구현하는 것입니다. 다음은 URL의 해시 값이 변경되었는지 폴링하는 예입니다.

var hash = window.location.hash;
var hashWatcher = setInterval(function() {
  if (window.location.hash != hash) {
    updatePage(); 
 }}, 1000);

setInterval은 "실행 시작" 사이의 간격을 지정하며 각 작업 실행 자체에 소요되는 시간을 고려하지 않습니다. 따라서 실제로 실행 간격은 지정된 시간보다 짧습니다. 예를 들어 setInterval은 100ms마다 실행하도록 지정하고 각 실행에는 5ms가 걸립니다. 그런 다음 첫 번째 실행이 끝난 후 95밀리초 후에 두 번째 실행이 시작됩니다. 실행에 특히 오랜 시간이 걸리는 경우(예: 105밀리초) 다음 실행은 종료 후 즉시 시작됩니다.

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。

var i = 1;
var timer = setTimeout(function() {
  alert(i++);
  timer = setTimeout(arguments.callee,2000);
}, 2000);

上面代码可以确保，下一个对话框总是在关闭上一个对话框之后2000毫秒弹出。

根据这种思路，可以自己部署一个函数，实现间隔时间确定的setInterval的效果。

function interval(func, wait){
  var interv = function(){
    func.call(null);
    setTimeout(interv,wait);
  };
  setTimeout(interv,wait);
}interval(function(){
  console.log(2);
},1000);

上面代码部署了一个interval函数，用循环调用setTimeout模拟了setInterval。

HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。

3，clearTimeOut(),clearInterval()

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

(function() {
  var gid = setInterval(clearAllTimeouts,0);
  function clearAllTimeouts(){
    var id = setTimeout(function(){}, 0);
    while (id >0) {
      if (id !==gid) {
        clearTimeout(id);
      }
      id--;
    }
  }})();

运行上面代码后，实际上再设置任何setTimeout都无效了。

下面是一个clearTimeout实际应用的例子。有些网站会实时将用户在文本框的输入，通过Ajax方法传回服务器，jQuery的写法如下。

$('textarea').on('keydown', ajaxAction);

这样写有一个很大的缺点，就是如果用户连续击键，就会连续触发keydown事件，造成大量的Ajax通信。这是不必要的，而且很可能会发生性能问题。正确的做法应该是，设置一个门槛值，表示两次Ajax通信的最小间隔时间。如果在设定的时间内，发生新的keydown事件，则不触发Ajax通信，并且重新开始计时。如果过了指定时间，没有发生新的keydown事件，将进行Ajax通信将数据发送出去。

这种做法叫做debounce（防抖动）方法，用来返回一个新函数。只有当两次触发之间的时间间隔大于事先设定的值，这个新函数才会运行实际的任务。假定两次Ajax通信的间隔不小于2500毫秒，上面的代码可以改写成下面这样。

$('textarea').on('keydown', debounce(ajaxAction, 2500))

利用setTimeout和clearTimeout，可以实现debounce方法，该方法用于防止某个函数在短时间内被密集调用。具体来说，debounce方法返回一个新版的该函数，这个新版函数调用后，只有在指定时间内没有新的调用，才会执行，否则就重新计时。

function debounce(fn, delay){
  var timer = null;// 声明计时器
  return function(){
    var context =this;
    var args = arguments;
    clearTimeout(timer); 
   timer = setTimeout(function(){
      fn.apply(context,args); 
   }, delay);
  };
}

// 用法示例

var todoChanges = _.debounce(batchLog, 1000);
Object.observe(models.todo, todoChanges);

现实中，最好不要设置太多个setTimeout和setInterval，它们耗费CPU。比较理想的做法是，将要推迟执行的代码都放在一个函数里，然后只对这个函数使用setTimeout或setInterval。

4，运行机制

setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮EventLoop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。

这意味着，setTimeout和setInterval指定的代码，必须等到本轮EventLoop的所有同步任务都执行完，再等到本轮EventLoop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。

setTimeout(someTask, 100);
veryLongTask();

上面代码的setTimeout，指定100毫秒以后运行一个任务。但是，如果后面的veryLongTask函数（同步任务）运行时间非常长，过了100毫秒还无法结束，那么被推迟运行的someTask就只有等着，等到veryLongTask运行结束，才轮到它执行。

这一点对于setInterval影响尤其大。

setInterval(function () {
  console.log(2);
}, 1000);
(function () {
  sleeping(3000);
})();

上面的第一行语句要求每隔1000毫秒，就输出一个2。但是，第二行语句需要3000毫秒才能完成，请问会发生什么结果？

结果就是等到第二行语句运行完成以后，立刻连续输出三个2，然后开始每隔1000毫秒，输出一个2。也就是说，setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题（比如集中发出Ajax请求）。

5， setTimeout(f,0)

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，那么会立刻执行吗？

答案是不会。因为上一段说过，必须要等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行setTimeout指定的任务。也就是说，setTimeout的真正作用是，在“消息队列”的现有消息的后面再添加一个消息，规定在指定时间执行某段代码。setTimeout添加的事件，会在下一次Event Loop执行。

setTimeout(f, 0)将第二个参数设为0，作用是让f在现有的任务（脚本的同步任务和“消息队列”指定的任务）一结束就立刻执行。也就是说，setTimeout(f, 0)的作用是，尽可能早地执行指定的任务。而并不是会立刻就执行这个任务。

setTimeout(function () {
  console.log('hello world！');
}, 0);

上面代码的含义是，尽可能早地显示“hello world！”。

setTimeout(f, 0)指定的任务，最早也要到下一次EventLoop才会执行。请看下面的例子。

setTimeout(function() {
  console.log("Timeout");
}, 0)
function a(x) {
  console.log("a()开始运行");
  b(x);
  console.log("a()结束运行");
}
function b(y) {
  console.log("b()开始运行");
  console.log("传入的值为" + y);
  console.log("b()结束运行");
}
console.log("当前任务开始");
a(42);
console.log("当前任务结束");

输出结果如下：

// 当前任务开始， a() 开始运行， b() 开始运行， 传入的值为42，b() 结束运行， a() 结束运行， 当前任务结束

上面代码说明，setTimeout(f, 0)必须要等到当前脚本的所有同步任务结束后才会执行。

即使消息队列是空的，0毫秒实际上也是达不到的。根据HTML5标准，setTimeout推迟执行的时间，最少是4毫秒。如果小于这个值，会被自动增加到4。这是为了防止多个setTimeout(f, 0)语句连续执行，造成性能问题。

另一方面，浏览器内部使用32位带符号的整数，来储存推迟执行的时间。这意味着setTimeout最多只能推迟执行2147483647毫秒（24.8天），超过这个时间会发生溢出，导致回调函数将在当前任务队列结束后立即执行，即等同于setTimeout(f, 0)的效果。

6 ，正常任务与微任务

正常情况下，JavaScript的任务是同步执行的，即执行完前一个任务，然后执行后一个任务。只有遇到异步任务的情况下，执行顺序才会改变。

这时，需要区分两种任务：正常任务（task）与微任务（microtask）。它们的区别在于，“正常任务”在下一轮EventLoop执行，“微任务”在本轮Event Loop的所有任务结束后执行。

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
Promise.resolve().then(function() {
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

输出结果如下：

// 1， 5，3，4， 2

上面代码的执行结果说明，setTimeout(fn, 0)在Promise.resolve之后执行。

这是因为setTimeout语句指定的是“正常任务”，即不会在当前的Event Loop执行。而Promise会将它的回调函数，在状态改变后的那一轮Event Loop指定为微任务。所以，3和4输出在5之后、2之前。

正常任务包括以下情况。

•   setTimeout

•   setInterval

•   setImmediate

•   I/O

•   各种事件（比如鼠标单击事件）的回调函数

微任务目前主要是process.nextTick和 Promise 这两种情况。

相关推荐：

 

위 내용은 js의 타이머 기능 사용 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!