Skip to content

Files

Latest commit

ac3330c · Mar 5, 2018

History

History
50 lines (41 loc) · 1.54 KB

4.2.7 定时器.md

File metadata and controls

50 lines (41 loc) · 1.54 KB

setTimeout

setTimeout还有一个需要注意的地方:如果被setTimeout推迟执行的回调函数是某个对象的方法,
那么该方法中的this关键字将指向全局环境,而不是定义时所在的那个对象。

var x = 1;

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

setTimeout(o.y,1000);
// 1

上面代码输出的是1,而不是2,这表示o.y的this所指向的已经不是o,而是全局环境了。

再看一个不容易发现错误的例子。

function User(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);
  }
}

var user = new User('John');

setTimeout(user.sayHi, 1000);

上面代码只会显示undefined,因为等到user.sayHi执行时,它是在全局对象中执行,所以this.login取不到值。

为了防止出现这个问题,一种解决方法是将user.sayHi放在函数中执行。

setTimeout(function() {
  user.sayHi();
}, 1000);

上面代码中,sayHi是在user作用域内执行,而不是在全局作用域内执行,所以能够显示正确的值。

另一种解决方法是,使用bind方法,将绑定sayHi绑定在user上面。

setTimeout(user.sayHi.bind(user), 1000);

HTML 5标准规定,setTimeout的最短时间间隔是4毫秒。
为了节电,对于那些不处于当前窗口的页面,浏览器会将时间间隔扩大到1000毫秒。
另外,如果笔记本电脑处于电池供电状态,Chrome和IE 9以上的版本,会将时间间隔切换到系统定时器,大约是15.6毫秒。