我在我的网站上有一块js来切换图像但是当你第二次点击图像时需要延迟。延迟应该是1000毫秒。所以你会点击img.jpg然后会出现img_onclick.jpg。然后，您将单击img_onclick.jpg图像，然后在再次显示img.jpg之前应该延迟1000毫秒。
以下是代码：
jQuery(document).ready(function($) {
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
});
答案 0 :(得分：292)
使用 setTimeout() ：
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
如果您想在没有setTimeout的情况下执行此操作：请参阅this question。
答案 1 :(得分：35)
setTimeout(function(){
}, 500);
将代码放在{ }
500 = 0.5秒
2200 = 2.2秒
等
答案 2 :(得分：9)
javascript setTimeout和setInterval（other）
这两种方法都有相同的签名。它们将回调函数和延迟时间作为参数。
setTimeout仅在延迟后执行一次，而setInterval在每次延迟milisecs后继续调用回调函数。
这两个方法都返回一个整数标识符，可用于在计时器到期之前清除它们。
clearTimeout和clearInterval这两种方法都采用从上述函数setTimeout和setInterval
示例：
<强> setTimeout
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
如果您运行上述代码，您会看到它提醒 before setTimeout ，然后 after setTimeout ，最后它会提醒 {{在1秒（1000毫秒）后<}>
您可以从示例中注意到I am setTimeout是异步的，这意味着在进入下一个语句之前它不会等待计时器过去，即setTimeout(...)
示例：
<强> setInterval
alert("after setTimeout");如果您运行上述代码，您会看到它提醒 alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
，然后 before setInterval ，最后它会提醒 {{ 1}} 1秒后（1000毫秒）5次因为setTimeout在5秒后清除计时器，否则每1秒就会发出警报 after setInterval 无限。
浏览器内部如何做到这一点？
我将简要解释一下。
要了解您必须了解javascript中的事件队列。在浏览器中实现了一个事件队列。每当在js中触发事件时，所有这些事件（如点击等等）都会添加到此队列中。当您的浏览器无法执行任何操作时，它会从队列中获取事件并逐个执行。
现在，当您调用I am setInterval或I am setInterval时，您的回调会在浏览器中注册到计时器，并在给定时间到期后添加到事件队列中，最终javascript从队列中获取该事件并执行它。
这种情况发生了，因为javascript引擎是单线程的，它们一次只能执行一件事。因此，他们无法执行其他JavaScript并跟踪您的计时器。这就是为什么这些计时器在浏览器中注册（浏览器不是单线程），它可以跟踪计时器并在计时器到期后在队列中添加一个事件。
同样发生setTimeout只有在这种情况下，事件会在指定的时间间隔后一次又一次地添加到队列中，直到它被清除或浏览器页面刷新为止。
注意
传递给这些函数的延迟参数是最小延迟 时间来执行回调。这是因为计时器到期后 浏览器将事件添加到要由队列执行的队列中 javascript引擎，但回调的执行取决于你的 事件在队列中的位置以及引擎是单线程的 将逐个执行队列中的所有事件。
因此，当您的其他代码阻塞线程并且没有时间处理队列中的内容时，您的回调有时可能会超过指定的延迟时间。
正如我提到的，javascript是单线程。所以，如果你长时间阻止线程。
喜欢这段代码
setInterval您的用户可能会收到一条消息，指出页面无响应。
答案 3 :(得分：6)
ES-6解决方案
以下是使用aync/await实际延迟的示例代码。
有很多限制，这可能没什么用，但只是为了好玩而在这里张贴..
async function delay(delayInms) {
return new Promise(resolve => {
setTimeout(() => {
resolve(2);
}, delayInms);
});
}
async function sample() {
console.log('a');
console.log('waiting...')
let delayres = await delay(3000);
console.log('b');
}
sample();
答案 4 :(得分：5)
你可以使用承诺
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
那就用这个方法
console.log("Hello");
sleep(2000).then(() => { console.log("World!"); });
或
console.log("Hello");
await sleep(2000);
console.log("World!");
答案 5 :(得分：1)
对于同步呼叫，您可以使用以下方法：
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
答案 6 :(得分：0)
如果你需要刷新，这是另一个可能性：
setTimeout(function () {
$("#jsSegurosProductos").jsGrid("refresh");
}, 1000);
答案 7 :(得分：0)
我会给出我的意见，因为它有助于我理解我在做什么。
要制作一个等待3秒钟的自动滚动幻灯片，我执行了以下操作：
var isPlaying = true;
function autoPlay(playing){
var delayTime = 3000;
var timeIncrement = 3000;
if(playing){
for(var i=0; i<6; i++){//I have 6 images
setTimeout(nextImage, delayTime);
delayTime += timeIncrement;
}
isPlaying = false;
}else{
alert("auto play off");
}
}
autoPlay(isPlaying);
请记住，在执行这样的setTimeout（）时;它将执行所有超时功能，就好像它们在同一时间执行一样，假设在setTimeout（nextImage，delayTime）中;延迟时间是静态的3000毫秒。
我所做的考虑是通过delayTime += timeIncrement;在每次循环增量后添加额外的3000毫秒/秒。
对于那些关心的人来说，我的nextImage（）是这样的：
function nextImage(){
if(currentImg === 1){//change to img 2
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[1].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[1];
imgDescription.innerHTML = imgDescText[1];
currentImg = 2;
}
else if(currentImg === 2){//change to img 3
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[2].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[2];
imgDescription.innerHTML = imgDescText[2];
currentImg = 3;
}
else if(currentImg === 3){//change to img 4
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[3].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[3];
imgDescription.innerHTML = imgDescText[3];
currentImg = 4;
}
else if(currentImg === 4){//change to img 5
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[4].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[4];
imgDescription.innerHTML = imgDescText[4];
currentImg = 5;
}
else if(currentImg === 5){//change to img 6
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[5].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[5];
imgDescription.innerHTML = imgDescText[5];
currentImg = 6;
}
else if(currentImg === 6){//change to img 1
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[0].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[0];
imgDescription.innerHTML = imgDescText[0];
currentImg = 1;
}
}
答案 8 :(得分：0)
这是我正在解决的问题。我同意这是由于时间问题，需要暂停执行代码。
{{1}}
此新代码将暂停它1秒钟，同时运行您的代码。