如何设置时间延迟在javascript

我有这一段js在我的网站上切换图像，但需要一个延迟，当你第二次点击图像。延迟应该是1000ms。点击img_jpg然后img_onclick。jpg就会出现。然后单击img_onclick.jpg图像，在再次显示img.jpg之前应该会有1000ms的延迟。

代码如下:

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();
});
});
1194115 次浏览
小开
最佳答案

使用setTimeout():

var delayInMilliseconds = 1000; //1 second


setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);

如果你想不使用setTimeout:参考这个问题。

小开 
setTimeout(function(){




}, 500);

把你的代码放在{ }

500 = 0.5秒

2200 = 2.2秒

等。

小开

在javascript中有两种(最常用的)类型的计时器函数setTimeout和setInterval (其他)

这两个方法具有相同的签名。它们以回调函数和延迟时间为参数。

setTimeout在延迟后只执行一次，而setInterval在每个延迟毫秒后都继续调用回调函数。

这两个方法都返回一个整数标识符，可用于在计时器过期之前清除它们。

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(...)是异步的，这意味着它在执行下一个语句，即alert("after setTimeout");

例子:

setInterval

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，然后after setInterval，最后在1秒(1000毫秒)后警告I am setInterval 5次，因为setTimeout在5秒后清除计时器，否则每1秒你会得到I am setInterval无限警报。

浏览器内部如何做到这一点?

我简单解释一下。

要理解这一点，你必须了解javascript中的事件队列。在浏览器中实现了一个事件队列。当一个事件在js中被触发时，所有这些事件(如点击等)。被添加到此队列。当你的浏览器没有什么要执行时，它会从队列中获取一个事件并逐个执行。

现在，当你调用setTimeout或setInterval时，你的回调会注册到浏览器中的一个计时器，并在给定的时间过期后添加到事件队列中，最终javascript从队列中获取事件并执行它。

这是因为javascript引擎是单线程的，一次只能执行一件事。所以，他们不能执行其他javascript和跟踪你的计时器。这就是为什么这些计时器注册到浏览器(浏览器不是单线程的)，它可以跟踪计时器，并在计时器过期后在队列中添加一个事件。

同样的情况只发生在setInterval上，在这种情况下，事件会在指定的间隔后一次又一次地添加到队列中，直到它被清除或浏览器页面刷新。

请注意

传递给这些函数的延迟参数是最小延迟 执行回调的时间到了。这是因为在计时器过期之后 方法执行的队列中添加事件 Javascript引擎，但回调的执行取决于你的 事件在队列中的位置，因为引擎是单线程的 将逐个执行队列中的所有事件

因此，你的回调有时可能需要超过指定的延迟时间才能被调用，特别是当你的其他代码阻塞线程，没有给它时间来处理队列中的内容时。

javascript是单线程的。所以，如果你阻塞线程很长时间。

像这样的代码

while(true) { //infinite loop
}

你的用户可能会收到一条消息说页面未回复。

小开

如果你需要刷新，这是另一种可能:

setTimeout(function () {
$("#jsSegurosProductos").jsGrid("refresh");
}, 1000);
小开

我会给出我的意见，因为这有助于我理解我在做什么。

为了制作一个等待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;递增for循环后额外增加3000 milli/s。

对于那些谁关心这里是什么我的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;
}
}
小开

ES-6解决方案

下面是一个示例代码，它使用aync /等待来获得实际的延迟。

有很多限制，这可能没有用，但只是为了好玩发布在这里。

const delay = (delayInms) => {
return new Promise(resolve => setTimeout(resolve, delayInms));
}


const sample = async () => {
console.log('a');
console.log('waiting...')
let delayres = await delay(3000);
console.log('b');
}
sample();

小开

以下是我正在做的解决这个问题的方法。我同意这是因为时间问题，需要暂停来执行代码。

var delayInMilliseconds = 1000;
setTimeout(function() {
//add your code here to execute
}, delayInMilliseconds);

这个新代码将暂停1秒，同时运行您的代码。

小开

对于同步调用，您可以使用下面的方法:

function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
小开

你可以利用这个承诺

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!");
小开

const delay = (delayInms) =>新的承诺(resolve =>setTimeout(解决delayInms)); 等待延迟(100)< / p >

小开

我不是JS领域的专家，但我已经找到了使用setTimeout()和递归函数解决这个问题的方法，如下所示:

i=0; //you should set i as a global variable
function recFunc() {
i++;
if (i == 1) {
//do job1
} else if (i == 2) {
//do job2
} else if (i == 3) {
//do job3
}
if (i < 3) { //we have 3 distinct jobs. so the condition is (j < 3)
setTimeout(function () {
recFunc();
}, 2000); //replace 2000 with desired delay
}
}
//
//
//
recfunc(); //start the process

提交答案