如何在JavaScript中设置时间延迟

Question

我的网站上有这片js可以切换图像，但是第二次单击图像时需要延迟。延迟应为1000ms。因此，您将单击img.jpg，然后将出现img_onclick.jpg。然后，您将单击img_onclick.jpg图像，然后应该有1000ms的延迟，然后才能再次显示img.jpg。

这是代码：

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 secondsetTimeout(function() {  //your code to be executed after 1 second}, delayInMilliseconds);

Answer 2

javascript setTimeout和setInterval（other）中有两种（最常用的）计时器函数类型这两种方法都具有相同的签名。他们以回调函数和延迟时间为参数。setTimeout在延迟之后仅执行一次，而setInterval在每个延迟毫秒后继续调用回调函数。这两种方法都返回一个整数标识符，可用于在计时器到期之前清除它们。clearTimeout和clearInterval这两种方法采取从上面函数返回一个整数标识符setTimeout和setInterval例：setTimeoutalert("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");例：setIntervalalert("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 secondsetTimeout(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中触发一个事件时，所有这些事件（例如click等）都会添加到此队列中。当您的浏览器没有什么要执行时，它将从队列中获取一个事件并逐一执行它们。现在，当您调用setTimeout或setInterval您的回调在浏览器中注册一个计时器，并在给定时间到期后将其添加到事件队列中，并最终javascript从队列中获取事件并执行该事件。发生这种情况是因为javascript引擎是单线程的，并且它们一次只能执行一件事。因此，他们无法执行其他javascript并跟踪您的计时器。这就是为什么这些计时器是在浏览器中注册的（浏览器不是单线程的），并且它可以跟踪计时器并在计时器到期后在队列中添加事件。setInterval仅在这种情况下，会发生同样的情况，即在指定的时间间隔后将事件一次又一次地添加到队列中，直到事件被清除或刷新浏览器页面。注意传递给这些函数的delay参数是执行回调的最短延迟时间。这是因为在计时器到期后，浏览器将事件添加到要由JavaScript引擎执行的队列中，但是回调的执行取决于您事件在队列中的位置，并且由于引擎是单线程的，因此它将在其中执行所有事件。队列一个接一个。因此，当您的其他代码阻塞线程并且没有给它时间来处理队列中的内容时，回调可能需要比指定的延迟时间更多的时间来专门调用。正如我提到的，javascript是单线程。因此，如果您长时间阻塞线程。像这样的代码while(true) { //infinite loop }您的用户可能会收到一条消息，指出页面没有响应。