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毫秒。