关于setTimeout深度理解

这两天在学习过程中,经常用到了setTimeout( ) 方法,详细了解后发现,这个方法并不是以前想的那么简单,网上看了很多网友的实例,很受启发。
下面根据实例再来重新梳理一下

1.setTimeout( )基本概述

setTimeou方法可以使函数按要求延迟一段时间执行,并且可以传递参数

setTimeout(function/code, milliseconds, param1, param2, ...)

function|code   //调用一个函数 或是代码串。
//注意:若是使用代码串,则需要输入字符串,给代码加上引号。引擎会直接用eval将字符串转化成代码执行。若是函数则不用加上引号
milliseconds    //代码执行间隔的时间
param1、param2、...  //所要传递的参数,此项可以不填

html 5标准规定,setTimeout的最短时间间隔是4毫秒。对于那些不处于当前窗口的页面,浏览器会将时间间隔扩大到1000毫秒。
所以说,有时候尽管设置延迟时间为0,setTimeout也会使用最短延迟时间。

2.setTimeout在对象的回调函数中的this

当setTimeout中的函数要调用某个对象的方法时,这时setTimeout的回调函数中,this是指向window的,也就是指向全局

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

上面的代码很明显,y属性的函数中this原本是指向对象o,当使用setTimeout调用时,this指向了外部的全局

3.setTimeout运行机制

setTimeout和setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮Event Loop时,再检查是否到了指定时间。如果到了,就将事件添加到任务队列的尾部,并执行对应的代码;如果不到,就等到再下一轮Event Loop时重新判断。这意味着,setTimeout指定的代码,必须等到本次执行的所有代码都执行完,才会执行。

4.结合for循环实例

网上看了几个很有意思的实例,记录下来

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了
所以上面的代码会输出5个5

那么怎么改才能输出 0 到 4 呢?
加一个闭包就行

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值