settimeout第三个参数

更新日期: 2022-09-16阅读: 1.4k标签: setTimeout

说起来你可能不相信,setTimeout居然有第三个参数,我以前也没用过这个,是前几天看别人博客发现的,咋一看还以为写错了吧,下面一起看看这个setTimeout第三个参数。


setTimeout

setTimeout()方法设置一个定时器,该定时器在定时器到期后执行一个函数或指定的一段代码语法如下:

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

setTimeout函数有三个参数

fn:(必传)需要执行的函数。
time:(非必传) 延迟的毫秒数  。
  • 传值时:倒计时time毫秒后执行fn;
  • 不传时:默认为0,fn在最早可得的空闲时间执行,在"任务队列"的尾部执行fn,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。
param:(非必传) 附加参数,一旦定时器到期,它们会作为参数传递给。

我们可以知道定时器启动的时候,第三个及以后的参数会作为第一个 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 秒后再变红。


链接: https://fly63.com/article/detial/12135

setTimeout和setInterval被遗忘的第3个参数

惊为天人的发现promise里面的一个例子:原来 setTimeout居然还有第三个参数,调用方法的时候可以作为传参对象。定时器启动时,第三个及以后的参数是作为第一个参数(也就是函数)的参数传进去的。

剖析setTimeout和click点击事件的触发顺序

这段JavaScript代码当你在页面打开2s时间内点击一次按钮,效果是这样的:页面卡住大约5s钟大约5s后弹出 ,click handler点击弹窗确认后,弹出 timer handler

嘭,setTimeout炸了

今天要说的很简单,没有 setTimeout 的基本用法,也没有什么特殊用法。就是想记录一下 setTimeout 的一个特殊情况,分享给可能也不知道的你们。其中第二个参数是需要延时执行的毫秒数,大家应该都知道这个时间是不准确的,可以理解为最短延时。

JavaScript 开发者应该知道的 setTimeout 秘密

计时器setTimeout是我们经常会用到的,它用于在指定的毫秒数后调用函数或计算表达式。语法:setTimeout(code, millisec, args);注意:如果code为字符串,相当于执行eval()方法来执行code。

JS中定时器setInterval和setTImeout的this指向问题

在js中setTimeout和setInterval都是用来定时的一个功能,下面这篇文章主要给介绍了JS中setInterval和setTImeout的this指向问题,文中通过示例介绍的很详细,有需要的朋友可以参考借鉴,一起来看看吧。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!