如何在JavaScript中设置时间延迟

2020/10/23 01:21 · javascript ·  · 0评论

我的网站上有这片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();
    });
});

用途setTimeout()

var delayInMilliseconds = 1000; //1 second

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

如果您不希望这样做setTimeout:请参阅此问题

setTimeout(function(){


}, 500); 

将您的代码放在 { }

500 = 0.5秒

2200 = 2.2秒

等等

ES-6解决方案

以下是使用aync / await产生实际延迟的示例代码

有很多限制,可能没有用,只是在这里发布很有趣。

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

javascriptsetTimeoutsetIntervalother)中有两种(最常用的)计时器函数类型

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

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

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

clearTimeoutclearInterval这两种方法采取从上面函数返回一个整数标识符setTimeoutsetInterval

例:

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中触发一个事件时,所有这些事件(例如click等)都会添加到此队列中。当您的浏览器没有什么要执行时,它将从队列中获取一个事件并逐一执行它们。

现在,当您调用setTimeoutsetInterval您的回调在浏览器中注册一个计时器,并在给定时间到期后将其添加到事件队列中,并最终javascript从队列中获取事件并执行该事件。

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

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

注意

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

因此,当您的其他代码阻塞线程并且没有给它时间来处理队列中的内容时,回调可能需要花费比指定的延迟时间更多的时间来专门调用。

正如我提到的,javascript是单线程。因此,如果您长时间阻塞线程。

像这样的代码

while(true) { //infinite loop 
}

您的用户可能会收到一条消息,指出页面没有响应

对于同步呼叫,您可以使用以下方法:

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

如果需要刷新,这是另一种可能性:

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

这就是我正在解决的问题。我同意这是因为时间问题,需要暂停执行代码。

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

此新代码将暂停它一秒钟,同时运行您的代码。

我会提供意见,因为它可以帮助我了解自己在做什么。

要制作等待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);

请记住,像这样执行setTimeout()时;假设在setTimeout(nextImage,delayTime);延迟时间为静态3000毫秒,它将执行所有超时功能,就像它们在同一时间执行一样。

我要做的是在每个循环增量之后通过添加一个额外的3000毫秒delayTime += timeIncrement;

对于那些在这里的人,我的nextImage()看起来像什么:

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}
本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhongshezhishijianyanchi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!