JavaScript定时器setTimeout、setInterval使用详解

定时器：按我个人理解来说就是固定某个时间后，时间到了，就提醒我时间到了。

程序中的定时器：相当于倒计时，也相当于计时器。作用是在设定的某个时间后，执行特定的方法。

我们先来了解一下setTimeout定时器，他的特点就是只能用一次，也称为一次性定时器。

setTimeout( func, time, argument1, argument2, .... )；
语法解析： 
  1、func：固定时间后执行的方法
  2、time：设置固定的时间-按毫秒计算
  3、argument：传入方法的参数

案例：

    setTimeout(function(name,gender){         console.log(name + " is " + gender);     }, 1000, "Tom", "boy"); 

简写：

    setTimeout((name,gender) => {         console.log(name + " is " + gender);     }, 1000, "Tom", "boy");

案例解析：
开启了一个一次性定时器，1秒后执行我给定的函数。

接着看看 setInterval定时器，他的特点就是可以重复执行给定的函数。

console.log("1 ===>"); setTimeout(function(name,gender){ console.log(name + " is " + gender); }, 1000, "Tom", "boy"); console.log("2 ===>"); 执行结果： > "1 ===>" > "2 ===>" > "Tom is boy"

接下来就开始圈重点了：

定时器概念了解了，也会造定时器了，那这个定时器什么时候调用呢，因为我们的 javaScript代码是从上到下，逐行执行，那到了定时器这行我们的进程会不会等定时器执行完了再执行定时器后面的代码呢？答案是不会等！

遇到定时器，会将定时器加入到任务队列中(宏任务)，等所有代码执行完了，程序会看一下队列中还有什么没有完成的 ，如果有没完成的，就执行一下。

这样说可能有点抽象，看下案例好了。

console.log("1 ===>"); setTimeout(function(name,gender){ console.log(name + " is " + gender); }, 1000, "Tom", "boy"); console.log("2 ===>"); 执行结果： > "1 ===>" > "2 ===>" > "Tom is boy"

注意：任务队列里的执行顺序是按先来后到的

接下来再深入理解一下，我们先思考一个问题，一次性定时器和重复性定时器区别在哪，不可能就只是调一次和调多次这么简单吧。

提醒：接下来的内容比较重要，有点抽象但需要理解透彻

案例：假设我们需要每隔一秒控制台输出一句话。

结合我们本文的学习，给出思路：

1、一次性定时器的函数里再调定时器，形成循环。

2、开启一个重复性定时器

编写实现代码：

思路1: setTimeout(function run(name,gender){ console.log(" hello"); setTimeout(run,1000); }, 1000); 思路2: setInterval(()=>{ console.log("hello") },1000);

看到这大家可能会不禁感叹，就这？就这？这哪复杂了，逗我呢。

那不妨思考一下，第二个一次性定时器啥时候开始执行呢？第三个呢？第n个呢？程序运行的第n秒？

那我稍微改造一下刚刚的案例好了

let start = Date.now(); // 程序一运行的时间 let times = []; // 用来记录运行时间的数组 let sTime = setInterval(()=>{ times.push(Date.now() - start); // 记录下执行时间 if (start + 5000 

接着可以思考一下输出的结果是什么。

然后再来思考重复性定时器，第二次函数调用是啥时候执行呢？第三个呢？第n个呢？

再稍微改造一下好了

let start = Date.now(); // 程序一运行的时间 let times = []; // 用来记录运行时间的数组 let sTime = setInterval(()=>{ times.push(Date.now() - start); // 记录下执行时间 if (start + 5000 

好了，留些时间思考一下…

思考好了吗，好了的话一起揭晓一下答案吧。

第一种情况：
> "1 ===>"
> "2 ===>"
> "1 ===>"
> "2 ===>"

第二种情况：
> Array [1001, 2003, 3003, 4000, 5000, 6000]

分析：
情况1:思考这个问题就可 -> 输出 "1 ===>" 之后我开启了另一个定时器，此时是不是应该再输出"1 ===>"？

然后就进入了定时器循环，结果一直只有"1 ===>"？

结合我们的结果，可以发现下一个定时器是什么时候开的？没错，执行完第一个定时器函数内的代码后再执行的。

情况2:根据时间的间隔很容易知道时间就是1秒上下几毫秒，所以下一个定时器是第一个定时器时间结束后立即开启的。

这就是他们两个比较靠底层的区别。

总结的话就留给大家自己总结吧，毕竟一千个读者就会有一千个读者(哈哈，开个玩笑，说句可能像话的话

以上就是JavaScript定时器setTimeout、setInterval使用详解的详细内容，更多请关注0133技术站其它相关文章！