如何在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();
    });
});
Manoj Sharma
已编辑的问题 27日 六月 2017 в 9:56
编程
javascript jquery
26日 七月 2013 в 2:13
16 种观点
解决办法

使用setTimeout()。

var delayInMilliseconds = 1000; //1 second

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

如果你想不使用`setTimeout'来做。请参考本题。

jegtugado
编辑本段答案27日 十月 2017 в 2:21
评论(2)
 
setTimeout(function(){

}, 500);

将你的代码放在"{ }"的内部。

500=0.5秒

2200=2.2秒

等等。

maudulus
编辑本段答案29日 十一月 2016 в 8:17
评论(0)

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

如果你运行上面的代码，你会看到它的警报是在setTimeout之前，然后是在setTimeout之后，最后它的警报是我在setTimeout后1秒（1000ms）。

你可以从这个例子中注意到，setTimeout(...)是异步的，这意味着它在进入下一个语句之前不会等待计时器过期，即alert("fter 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秒（1000ms）后发出5次警报I am setInterval，因为setTimeout在5秒后清除计时器，否则每1秒你会得到警报I am setInterval无限期的。

浏览器内部是如何做到这一点的呢？

我将简要地解释一下。

要理解这一点，你必须了解javascript中的事件队列。浏览器里有一个事件队列。每当js中的一个事件被触发，所有这些事件（如点击等）都会被添加到这个队列中。 当你的浏览器没有什么要执行的时候，它就会从队列中抽取一个事件并逐一执行。

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

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

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

注意

你传递给这些函数的延迟参数是最小的延迟 执行回调的时间。这是因为在定时器过期后 浏览器会将事件添加到队列中，由 javascript引擎执行，但回调的执行取决于你的 事件在队列中的位置，由于引擎是单线程的，它 将逐一执行队列中的所有事件。

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

正如我提到的，javascript是单线程的。所以，如果你长期阻塞线程。

像这样的代码

while(true) { //infinite loop 
}

你的用户可能会收到一条信息，说页面没有响应。

Nadir Laskar
编辑本段答案9日 六月 2017 в 6:37
评论(2)