我有这一段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();
    });
});

当前回答

对于同步调用,您可以使用下面的方法:

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

其他回答

使用setTimeout ():

var delayInMilliseconds = 1000; //1 second

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

如果你想不使用setTimeout:请参考这个问题。

我不是JS领域的专家,但我已经找到了一个使用setTimeout()和递归函数的解决方法,如下所示:

i=0; //you should set i as a global variable
function recFunc() {
    i++;
    if (i == 1) {
        //do job1
    } else if (i == 2) {
        //do job2
    } else if (i == 3) {
        //do job3
    }
    if (i < 3) { //we have 3 distinct jobs. so the condition is (j < 3)
        setTimeout(function () {
            recFunc();
        }, 2000); //replace 2000 with desired delay
    }
}
//
//
//
recfunc(); //start the process

ES-6解决方案

下面是一个示例代码,它使用aync/await来获得实际的延迟。

有很多限制,这可能没有用,但只是为了好玩发布在这里。

const delay = (delayInms) => { 返回新的承诺(resolve => setTimeout(resolve, delayInms)); } Const sample = async () => { console.log (' a '); console.log(“等待…”) 让延迟=等待延迟(3000); console.log (b); } 样品();

setTimeout(function(){


}, 500); 

将代码放在{}中

500 = 0.5秒

2200 = 2.2秒

etc.

我会给出我的意见,因为这有助于我理解我在做什么。

为了制作一个等待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毫秒。

为此,我所做的是在每个for循环增量之后通过delayTime += timeIncrement;增加额外的3000 milli/s。

对于那些谁关心这里是什么我的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;
    }
}