jQuery setTimeout（）函数示例
setTimeout是一个本机JavaScript函数（尽管它可以与jQuery之类的库一起使用，我们将在后面看到），它会在指定的延迟（以毫秒为单位）后调用一个函数或执行一个代码段。 例如，如果您希望在访问者浏览页面一定时间后显示弹出窗口，或者希望在从元素上移除悬停效果之前等待一小段时间（以防用户意外地将其弹出），这可能会很有用。鼠标移出）。
基本setTimeout示例
为了演示该概念，下面的演示在单击按钮两秒钟后显示一个弹出窗口。
请参阅CodePen上的SitePoint （ @SitePoint ）的Pen Delayed Magnific Popup模式 。
如果您没有看到弹出窗口，请访问CodePen并在那里运行演示。
句法
从MDN文档中 ， setTimeout的语法如下：
var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);
哪里：
-
timeoutID是数字ID，可与clearTimeout()结合使用以取消计时器。 -
scope是指Window接口或WorkerGlobalScope接口 。 -
function是计时器到期后要执行的功能。 -
code（使用替代语法）是要执行的代码字符串。 -
delay是函数调用应延迟的毫秒数。 如果省略，则默认为0。
注意：方括号[]表示可选参数。
setTimeout与window.setTimeout
您会注意到上面的语法使用scope.setTimeout 。 为什么是这样？
好吧，在浏览器中运行代码时， scope将引用全局window对象。 setTimeout和window.setTimeout引用相同的函数，唯一的区别是在第二条语句中，我们将setTimeout方法引用为window对象的属性。
我认为，这增加了复杂性，几乎没有好处。 如果您定义了一个替代的setTimeout方法，该方法将在范围链中优先找到并返回，那么您可能会担心更大的问题。
在本教程中，我将省略window ，但是最终，您可以选择哪种语法由您决定。
使用例
setTimeout接受对函数的引用作为第一个参数。
这可以是函数的名称：
function explode(){
alert("Boom!");
}
setTimeout(explode, 2000);
引用函数的变量：
var explode = function(){
alert("Boom!");
};
setTimeout(explode, 2000);
或匿名函数：
setTimeout(function(){
alert("Boom!");
}, 2000);
还可以传递setTimeout字符串以使其执行：
setTimeout("alert('Boom!');", 2000);
但是，出于以下原因，不建议这样做：
- 很难阅读（因此很难维护和/或调试）
- 它使用一个隐含的
eval()，这是潜在的安全风险 - 它比其他方法要慢，因为它必须调用JS解释器。
这个StackOverflow问题提供了以上几点的更多信息。
将参数传递给setTimout
在基本方案中，将参数传递给setTimeout执行的回调的首选跨浏览器方法是使用匿名函数作为第一个参数。
在以下示例中，我们从greetings数组中选择一个随机问候greetings ，并将此随机问候语作为参数传递给greet函数，该函数由setTimeout执行，延迟一秒：
function greet(greeting){
console.log(greeting);
}
function getRandom(arr){
return arr[Math.floor(Math.random()*arr.length)];
}
var greetings = ["Hello", "Bonjour", "Guten Tag"],
randomGreeting = getRandom(greetings);
setTimeout(function(){
greet(randomGreeting);
}, 1000);
JS斌
另一种方法
从文章顶部的语法可以看出，还有第二种方法将参数传递给setTimeout执行的回调。 这涉及在延迟后列出所有参数。
参考前面的示例，这将为我们提供：
setTimeout(greet, 1000, randomGreeting);
不幸的是，这在IE9或更低版本（参数通过undefined传递）中不起作用。 但是， MDN上有可用的pollyfill 。
该问题this
setTimeout执行的代码在与调用它的函数不同的执行上下文中运行。 当this关键字的上下文很重要时，这是有问题的：
var person = {
firstName: "Jim",
introduce: function(){
console.log("Hi, I'm " + this.firstName);
}
};
person.introduce();
// Outputs: Hi, I'm Jim
setTimeout(person.introduce, 50);
// Outputs: Hi, I'm undefined
该输出的原因是，在第一个示例中， this指向person对象，而在第二个示例中， this指向全局window对象（不具有firstName属性）。
为了解决这个问题，有多种措施：
明确设置的值， this
您可以使用bind方法来执行此操作，该方法将创建一个新函数，该函数在被调用时将其this关键字设置为提供的值（在本例中为person对象）。 这将给我们：
setTimeout(person.introduce.bind(person), 50);
注意： bind是ECMAScript 5中引入的，因此仅适用于更现代的浏览器 。 您可以在此SitePoint文章中了解有关它的更多信息（以及其他设置this值的方法）。
使用图书馆
许多库都带有内置函数来解决此问题。 例如，jQuery的jQuery.proxy（）方法。 这需要一个函数并返回一个始终具有特定上下文的新函数。 在我们的情况下，将是：
setTimeout($.proxy(person.introduce, person), 50);
JS斌
将箭头函数与setTimeout一起使用
ES6引入了箭头功能。 它们的语法比常规函数短得多：
(param1, param2, paramN) => expression
您当然可以将它们与setTimeout一起使用，但要注意一个陷阱-即，箭头函数没有自己的this值。 而是使用封闭的词汇上下文的this值。
使用常规函数：
const person = {
firstName: "Jim",
introduce: function() {
console.log(`Hi, I'm ${this.firstName}`);
}
};
person.introduce();
// Hi, I'm Jim
使用箭头功能：
const person = {
firstName: "Jim",
introduce: () => {
console.log(`Hi, I'm ${this.firstName}`);
}
};
person.introduce();
// Hi, I'm undefined
在第二个示例中， this指向全局window对象（不具有firstName属性）。
在setTimeout使用箭头功能时，这可能会使我们绊倒。 以前，我们看到了如何为setTimeout提供一个具有正确的this值的函数：
setTimeout(person.introduce.bind(person), 50);
当在introduce方法中使用箭头功能时，此功能将无效，因为箭头功能没有自己的this值。 该方法仍将记录undefined 。
带有箭头功能和setTimeout的Cleaner代码
但是，由于箭头函数没有自己的this值，因此它也可以发挥我们的优势。
这样的代码...
var person = {
firstName: "Jim",
delayedIntroduce: function() {
setTimeout(
function() {
console.log("Hi, I'm " + this.firstName);
}
.bind(this)
, 1000);
}
}
person.delayedIntroduce();
…可以使用箭头功能更简洁地重写：
const person = {
firstName: "Jim",
delayedIntroduce() {
setTimeout(
() => { console.log(`Hi, I'm ${this.firstName}`); }, 1000
);
}
}
person.delayedIntroduce();
如果您想了解箭头功能的入门知识，请阅读ES6箭头功能：JavaScript中的简洁语法 。
取消计时器
setTimeout的返回值是一个数字ID，可与clearTimeout函数结合使用以取消计时器：
var timer = setTimeout(myFunction, 3000);
clearTimeout(timer);
让我们看看实际情况。 在下面的笔中，如果单击“ 开始倒数”按钮，则将开始倒数。 如果倒计时完成，小猫就会得到它。 但是，如果按停止倒数按钮，计时器将被暂停并重置。 （如果倒数到零时看不到很酷的效果，请使用嵌入右下角的按钮重新运行笔。）
请参阅CodePen上SitePoint （ @SitePoint ）的Pen SetTimeout小猫 。
包起来
需要注意的一个潜在警告是setTimeout是异步的，因为它会将接收到的函数引用排队，以在当前调用堆栈完成执行后运行。 但是，它不能同时执行，也不能在单独的线程上执行（由于JavaScript具有单线程性质）。
console.log(1);
setTimeout(function(){
console.log(2);
}, 0);
console.log(3);
// Outputs: 1, 3, 2
在使用本机JavaScript setTimeout函数和jQuery的delay方法之间也存在一些混淆。
delay方法专门用于在给定jQuery队列中的方法之间添加延迟。 无法取消延迟。 例如，如果要使图像淡入淡出一秒钟，使其可见五秒钟，然后淡出一秒钟，则可以执行以下操作：
$("img").fadeIn(1000).delay(5000).fadeOut(1000);
setTimeout最好用于其他所有功能。
最后，如果需要在指定的延迟后重复执行代码，则setInterval更适合该工作。 您可以在此处阅读有关此功能的更多信息 。
结论
在本文中，我演示了如何使用setTimeout延迟函数的执行。 我还展示了如何将参数传递给setTimeout ，如何在回调函数中维护this值以及如何取消计时器。
如果您想了解更多信息，SitePoint Premium中有一个完整的JavaScript书库 。
如果您想讨论本文的内容，请在评论中进行。 但是，如果您遇到了与setTimeout （或其他任何事情）有关的编码问题，那么请前往SitePoint论坛 。 您可以使用（Google，Facebook，Twitter，Yahoo，GitHub或通过创建帐户）登录。 然后前往JavaScript论坛并启动一个线程来说明您的问题。
From: https://www.sitepoint.com/jquery-settimeout-function-examples/