文章出自个人博客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 函数的执行时间，间隔时间可以理解为被挤得没有了；

**技术文章推送** **手机、电脑实用软件分享**

JavaScript计时器函数用法相关推荐

JavaScript计时器的用法setTimeout（）和setInterval()
Javascript计时器的用法当我们学习前端的时候定时器是一个重要的知识点,几乎现在的我们打开一个网页中的页面都会看见定时器的身影,京东淘宝的定时秒,轮播图.规定时间的界面跳转- 在JavaScr ...
javascript毫秒计时器_JavaScript 计时器函数用法
Javascript中和大多数语言一样,存在计时函数,使某语句或函数不用立即执行,可以延时设定的时间值之后再执行. setTimeout() 这个函数表示括号中的代码,延时指定时间后再执行,格式为 s ...
JavaScript箭头函数用法
原始方式声明函数 function say(name){console.log("hello" + name); } 箭头函数 var say = name => conso ...
JavaScript计时器制作进度条
文章目录前言一.效果图二.代码 1.html代码 2.css代码 3.script代码总结前言学习了计时器函数的用法可以用来制作载入进度条,文章分为3部分代码:html.css.scrip ...
javascript计时器_JavaScript计时器：您需要了解的一切
javascript计时器 by Samer Buna 通过Samer Buna JavaScript计时器:您需要了解的一切 (JavaScript Timers: Everything you n ...
CStopWatch计时器的用法实例
CStopWatch计时器的用法实例创建CStopWatch对象: CStopWatch m_runningtimeWatch; //定义一个计时器定义一个装返回值的变量: double m_ru ...
为什么使用JavaScript eval函数是个坏主意？
eval函数是一种动态生成代码的强大而简便的方法,那么有哪些警告? #1楼我知道这个讨论很古老,但是我真的很喜欢Google的这种方法,并希望与他人分享这种感觉:) 另一件事是,您越了解越多,您就会 ...
Javascript的this用法
Javascript的this用法转自:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html th ...
JavaScript中foreach()用法及使用的坑
JavaScript中foreach()用法及使用的坑 JavaScript中foreach是用于遍历数组的方法,将遍历到的元素传递给回调函数,遍历的数组不能是空的要有值. foreach 语法: [ ...

JavaScript计时器函数用法