如何在javascript中设置时间延迟

Question

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

Answer 1

用途setTimeout():

var delayInMilliseconds = 1000; //1 second

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

如果您不想这样做setTimeout:请参阅此问题.

Answer 2

setTimeout(function(){


}, 500); 

将代码放在 { }

500 = 0.5秒

2200 = 2.2秒

等等

Answer 3

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

Answer 4

在javascript setTimeout和setInterval(其他)有两种(大多数使用)类型的计时器功能

这两种方法都有相同的签名.它们将回调函数和延迟时间作为参数.

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最终I am setTimeout在1秒(1000毫秒)后发出警报

您从示例中可以注意到的是,它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最终I am setInterval 在1秒(1000毫秒)后发出5次警报,因为setTimeout在5秒后清除计时器,否则每1秒钟您将获得I am setInterval无限警报.

浏览器内部是如何做到的？

我将简要解释一下.

要了解您必须了解javascript中的事件队列.在浏览器中实现了一个事件队列.每当在js中触发事件时,所有这些事件(如点击等等)都会添加到此队列中.当您的浏览器无法执行任何操作时,它会从队列中获取事件并逐个执行.

现在,当你打电话setTimeout或setInterval你的回调被注册到浏览器中的计时器,它会在给定的时间到期后被添加到事件队列中,最终javascript从队列中获取事件并执行它.

发生这种情况是因为javascript引擎是单线程的,它们一次只能执行一件事.因此,他们无法执行其他JavaScript并跟踪您的计时器.这就是为什么这些计时器在浏览器中注册(浏览器不是单线程)并且它可以跟踪计时器并在计时器到期后在队列中添加事件.

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

注意

传递给这些函数的延迟参数是执行回调的最小延迟时间.这是因为在计时器到期后,浏览器将事件添加到队列以由javascript引擎执行,但回调的执行取决于您在队列中的事件位置,并且由于引擎是单线程的,它将执行所有事件.队列一个接一个.

因此,当您的其他代码阻塞线程并且没有给它时间处理队列中的内容时,您的回调可能需要花费超过指定的延迟时间来特别调用.

正如我提到的,javascript是单线程.所以,如果你长时间阻止线程.

喜欢这段代码

while(true) { //infinite loop 
}

您的用户可以得到一个消息,说页面不响应.

Answer 5

对于同步调用，您可以使用以下方法：

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

Answer 6

你可以使用承诺

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