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

当前回答

你可以利用这个承诺

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

其他回答

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

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

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

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

在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 
}

您的用户可能会收到一条消息,说页面没有响应。

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

为了制作一个等待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;
    }
}

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