setTimeout 是我们经常用的函数,它的第三个参数,额,我之前也没用过,是前几天看别人博客发现的,咋一看,写错了吧。之后搜了下还真有....
setTimeout
我们先看下MDN的介绍: setTimeout()方法设置一个定时器,该定时器在定时器到期后执行一个函数或指定的一段代码。
语法
var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);
参数
function
:function 是你想要在到期时间(delay 毫秒)之后执行的函数。
code
:这是一个可选语法,你可以使用字符串而不是 function ,在 delay 毫秒之后编译和执行字符串 (使用该语法是不推荐的)。
delay(可选)
:延迟的毫秒数 (一秒等于 1000 毫秒),函数的调用会在该延迟之后发生。如果省略该参数,delay 取默认值 0,意味着“马上”执行,或者尽快执行。不管是哪种情况,实际的延迟时间可能会比期待的(delay 毫秒数) 值长。
arg1, ..., argN(可选)
:附加参数,一旦定时器到期,它们会作为参数传递给。
我们可以知道定时器启动的时候,第三个及以后的参数会作为第一个 func()的参数传进去。
应用一
一起来看个经典的栗子吧:
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
上面这个栗子,大家都知道会连续输出 5 个 5,因为 setTimeout 是一个异步操作,而等到执行 setTimeout 时,for 循环已经执行完毕,这时的 i 已经等于 5,所以输出 5 次 5。当然,这并不是我们想要的。
方案一
最常见的改进方案是使用闭包。通过闭包,可以将变量 i 驻留在内存中,当输出 j 时,引用的是外部函数传递的变量 i,这个 i 是根据循环来的,执行 setTimeout 时已经确定了里面 i 的值,进而确定了 j 的值。
for (var i = 0; i < 5; i++) {
(function (j) {
setTimeout(function () {
console.log(j);
}, j * 1000);
})(i);
}
方案二
运用 setTimeout 的第三个参数。由于每次传入的参数是从 for 循环里面取到的值,所以会依次输出 0~4。
for (var i = 0; i < 5; i++) {
setTimeout(
function (j) {
console.log(j);
},
i * 1000,
i
);
}
应用二
这个用例的使用场景不常见,但可以对 setTimeout 有进一步的了解。
var doc = document.getElementById("div");
setTimeout(
function () {
doc.style.color = "red";
},
10000,
setTimeout(function () {
doc.style.color = "black";
}, 5000)
);
上面的结果是,div 元素内的字体样式 5 秒后变黑,10 秒后再变红。
最后
欢迎关注我的公众号【前端技术驿站】,分享前端实战视频!