如何在javascript中设置时间延迟

我在我的网站上有一个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();
    });
});

---

使用

设置超时（）

var delayInMilliseconds = 1000; //1 second

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

如果要在不使用设置超时的情况下执行此操作：请参阅

将代码放在
{}

500
=0.5秒

2200
=2.2秒

等等。
javascript
setTimeout
和
setInterval
（）

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

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

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

clearTimeout
和
clearInterval
这两种方法都采用从上述函数返回的整数标识符
setTimeout
和
setInterval

示例：


alert("before setTimeout");

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

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

如果运行上述代码，您将看到它在设置超时之前发出警报，然后在设置超时之后发出警报，最后在1秒（1000ms）之后发出警报

从该示例中您可以注意到，
setTimeout（…）
是异步的，这意味着它不会等到计时器运行后再转到下一个语句，即
alert（“setTimeout之后”）

示例：


alert("before setTimeout");

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

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

如果运行上述代码，您将看到它在设置间隔之前发出警报，然后在设置间隔之后发出警报，最后在1秒（1000ms）后发出警报5次由于setTimeout在5秒后清除计时器，否则每1秒您将收到警报
我是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);

ES-6解决方案

下面是一个用于具有实际延迟的示例代码

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


功能延迟（延迟毫秒）{
返回新承诺（解决=>{
设置超时（（）=>{
决心（2）；
}，delayInms）；
});
}
异步函数示例（）{
console.log（'a'）；
console.log（'waiting…'））
let delayres=等待延迟（3000）；
console.log（'b'）；
}
样本（）以下是我为解决此问题所做的工作。我同意这是因为时间问题，需要暂停以执行代码

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

函数睡眠（毫秒）{
var start=new Date（）.getTime（）；
对于（变量i=0；i<1e7；i++）{
如果（（新日期（）.getTime（）-start）>毫秒）{
打破
}
}
}
您可以使用承诺

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

然后用这个方法

console.log("Hello");
sleep(2000).then(() => { console.log("World!"); });

或

setTimeout（函数（）{/*YourCode*/}，1000）可能重复查找
.stop（）
。这里有一个关于如何同步的可能的副本吗？setTimeout中的代码无法识别类属性。@ishandutta20
console.log("Hello");
await sleep(2000);
console.log("World!");