我有这一段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();
    });
});

使用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秒

etc.


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

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

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

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

clearTimeout和clearInterval这两个方法都接受从上面的函数setTimeout和setInterval返回的整数标识符

例子:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

如果你运行上面的代码,你会看到它在setTimeout之前发出警报,然后在setTimeout之后,最后它在1秒(1000ms)后发出警报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);

如果你运行上面的代码,你会看到它在setInterval之前发出警报,然后在setInterval之后,最后它在1sec (1000ms)后发出警报I am setInterval 5次,因为setTimeout在5秒后清除定时器,否则每1秒你就会收到警报I am setInterval unlimited。

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

我简单解释一下。

要理解这一点,你必须了解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毫秒。

为此,我所做的是在每个for循环增量之后通过delayTime += timeIncrement;增加额外的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/await来获得实际的延迟。

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

const delay = (delayInms) => { 返回新的承诺(resolve => setTimeout(resolve, delayInms)); } Const sample = async () => { console.log (' a '); console.log(“等待…”) 让延迟=等待延迟(3000); console.log (b); } 样品();


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

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

or

console.log("Hello");
await sleep(2000);
console.log("World!");

const delay = (delayInms) => new Promise(resolve => setTimeout(resolve, delayInms)); 等待延迟(100)


我不是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