如何在JavaScript中设置时间延迟

我在网站上有一段js来切换图片，但是当您再次点击图片时需要延迟。 延迟应该是1000ms。 所以你会点击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:8888http://img.dovov.comimg_onclick.jpg'); }, function () { $(this).removeClass("active"); $(".trigger").find('img').prop('src', 'http://localhost:8888http://img.dovov.comimg.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

在javascript setTimeout和setInterval （ other ）中有两个（主要是使用）types的定时器函数，

这两种方法都有相同的签名。 他们以回呼function和延迟时间为参数。

setTimeout只在延迟后执行一次，而setInterval在延迟毫秒后继续调用callback函数。

这两个方法都会返回一个整数标识符，在定时器到期之前可以使用它来清除它们。

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最后它会在1sec（1000ms）之后提醒I am setTimeout

你可以从这个例子中注意到， setTimeout(...)是asynchronous的，这意味着它不会等待定时器到达下一个语句，即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终于在1秒（1000ms）之后发出5次I am setInterval提示，因为setTimeout在5秒之后清除计时器，否则每1秒钟你会得到提醒I am setInterval无限。

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

我将简要解释一下。

要了解，你必须知道JavaScript中的事件队列。 浏览器中实现了一个事件队列。 每当一个事件在js中被触发，所有这些事件（比如点击等等）都被添加到这个队列中。 当你的浏览器没有什么可执行的时候，它从队列中取出一个事件并逐个执行它们。

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

发生这种情况，因为JavaScript引擎是单线程的，他们一次只能执行一件事情。 所以，他们不能执行其他的JavaScript和跟踪你的计时器。 这就是为什么这些定时器是用浏览器注册的（浏览器不是单线程的），它可以跟踪定时器并在定时器超时后在队列中添加一个事件。

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

注意

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

因此，当您的其他代码阻塞线程并且不给它时间来处理队列中的内容时，您的callback有时可能会超过指定的延迟时间。

正如我所提到的JavaScript是单线程。 所以，如果你长时间阻塞线程。

像这样的代码

 while(true) { //infinite loop } 

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