JavaScript计时器函数用法

文章出自个人博客https://knightyun.github.io/2018/05/24/js-timer-function，转载请申明。

Javascript中和大多数语言一样，存在计时函数，使某语句或函数不用立即执行，可以延时设定的时间值之后再执行。

setTimeout()

这个函数表示括号中的代码，延时指定时间后再执行，格式为 setTimeout("function()", time)，其中 time 的单位是毫秒。

例如：

function fx() { 
      alert(); } setTimeout("fx()", 2000); 

也可以写成：

setTimoeout(function(){ 
      alert(); }, 2000); 

结果就是页面加载完 2 秒后弹出提示框。

clearTimeout()

clearTimeout() 方法用于结束 setTimeout() 方法的执行，括号中参数为 setTimeout() 返回的 ID 值。

举例说明：

var int1 = setTimeout(function(){ 
     alert();}, 5000); clearTimeout(int1); 

这样就能终止代码执行，不会弹出提示框。

setInterval()

这个函数表示每隔指定时间间隔执行一次括号中的代码，格式为：setInterval("function()", time)， time 单位依然为毫秒。

例如：

function fx() { 
      document.write("0"); } setInterval("fx()", 2000); 

这里就不要用 alert() 做实验了，后果你懂的 -_- .

同样也能写成：

setInterval(function(){ 
      document.write("0"); }, 1000); 

效果就是不断输出字符“0”。

clearInterval()

用法与 clearTimeout() 一样，终止 setInterval() 的执行，括号中填 setInterval() 的返回值。

例如：

var int2 = setInterval(function()[ document.write("0"); }, 1000); clearInterval(int2); 

这样就能终止输出。

注意

有个小问题，用 setTimeout() 举例，假如代码像下面这样写：

function fx() { 
      alert(); } setTimeout(fx(), 3000); 

相比上面，就是函数第一个参数少了双引号，猜一下后果会怎样……

后果当然是页面加载后立刻弹出提示框，并不会延时 3 秒。下面的写法也是类似的效果：

setTimeout((function(){ 
      alert(); })(), 3000); 

原因都一样，无论是语句块 fx() 还是匿名函数 (function(){})()，都是会立刻执行的语句，而加双引号的 "fx()" 和 function(){} 就是当成一个参数传递给了函数 setTimeout()，然后这个参数语句直到 setTimeou() 真正执行时才生效，也就是延时3秒后执行。

函数 setInterval() 的这个性质与 setTimeout() 类似。

拓展

回调函数参数

setTimeout 常见的便是使用两个参数，回调函数和时间，但是它还可以接受更多的参数，作为回调函数调用时传入的参数（可以有多个，按顺序填入即可）；

举个例子：

setTimeout(function(a, b){ 
      console.log(a + b); }, 3000, 1, 2); // 3 秒后输出： // 3 

返回值

setTimeout, setInterval 的返回值都是一个数字，具体值取决于当前环境的分配，每次调用后这个数字会加一，clearTimeout(), clearInterval() 方法传入的参数便是这个数字，只不过平时都是以变量代替；

let a = setTimeout(function(){ 
     }, 1000); let b = setTimeout(function(){ 
     }, 1000); let c = setTimeout(function(){ 
     }, 1000); console.log(a, b, c); // 1 （也可能是其他数字） // 2 // 3 clearTimeout(a); // 相当于 clearTiemout(1); clearTimeout(b); // clearTimeout(2) clearTimeout(c); // clearTimeout(3) 

时间精准度

setTimeout 会等到当前任务执行完，即使延迟时间已经到了，所以这也是常说 JavaScript 计时器不一定准确的原因所在，存在所用时间大于指定时间的情况；

console.log('start'); setTimeout('console.log("time")', 2000); // 该函数执行 5s 左右 function delay() { 
      for (i = 0; i < 1000; i++) { 
      for (j = 0; j < 1000; j++) { 
      for (k = 0; k < 1000; k++) { 
      ; } } } } delay(); console.log('end1'); console.log('end2'); // start // end1 // end2 // time 

setInterval 的执行间隔

该函数的作用是每隔一定时间执行一遍代码，但是代码的执行时间，被包括在间隔时间内，如果执行时间超过了间隔时间，那么下一次执行会立即执行；

function delay() { 
      let m = 3000; let t = new Date().getTime(); while (new Date().getTime() - t <= m) { 
      ; // 使该函数 执行时间为 3s } console.log(new Date().getSeconds()); } console.log(new Date().getSeconds()); setInterval(delay, 2000); 

最后的输出结果将是输出间隔变为 3s，而不是设定的 2s，因为 delay() 函数的执行时间超过了 setInterval() 的间隔时间，即间隔时间过了也要等到函数执行完毕，然后下一遍执行就紧接着来，不再有间隔时间，所以就使得最后的结果显示为每隔 3s 输出，其实就是整个 delay 函数的执行时间，间隔时间可以理解为被挤得没有了；