Javascript异步setTimeout与setInterval解析

setInterval

定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。


setTimeout

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。


demo1解析:


先后打印的结果是:

‘one’’three’’two’

原因:

回调时,被回调的函数会被放在event loop里,等待线程里的任务执行完后才执行event loop里的代码。 因此,上述代码会先把线程里的执行完后,再执行event loop里的setTimeout函数.。

这里的setTimeout是一个异步的过程,调用setTimeout时,把函数参数,放到事件队列中。等主程序运行完,再调用。

demo2:

  for(var i = 1; i <3; i++) {

         setTimeout(function(){

              console.log(i);

         },100);

   }

打印出来的结果是:3,3,3

解析:

因为js 是单线程的,setTimeout是异步执行的,所以当我们调用setTimeout时候,会有一个延时事件排入队列的队尾;

  1. 执行for循环
  2. setTimeout 异步执行,先暂存起来,等待执行
  3. 待所有程序执行完,处于空闲状态时,拿到暂存的函数在指定的时间后执行,这个时候for循环里的值已经是3了。

猜你喜欢

转载自blog.csdn.net/weixin_39818813/article/details/80663825