Как установить время задержки в JavaScript

У меня есть этот кусок js на моем веб-сайте для переключения изображений, но нужна задержка, когда вы нажимаете изображение во второй раз. Задержка должна быть 1000 мс. Таким образом, вы нажмете img.jpg, тогда появится img_onclick.jpg. Затем вы должны щелкнуть изображение img_onclick.jpg, после чего должна появиться задержка в 1000 мс, прежде чем снова отобразится 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 Solution

Ниже приведен пример кода, который использует aync / await для фактической задержки.

Есть много ограничений, и это может быть бесполезно, но просто размещать здесь для удовольствия ..

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

Существует два (в основном используемых) типа функции таймера в javascript setTimeoutи setInterval( другое )

Оба эти метода имеют одинаковую подпись. Они принимают функцию обратного вызова и время задержки в качестве параметра.

setTimeout выполняется только один раз после задержки, тогда как setInterval продолжает вызывать функцию обратного вызова после каждой задержки milisecs.

оба эти метода возвращают целочисленный идентификатор, который можно использовать для очистки их до истечения таймера.

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наконец, он предупреждает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 5 раз через 1 с (1000 мс), потому что setTimeout сбрасывает таймер через 5 секунд, а в противном случае каждую 1 секунду вы будете получать оповещение I am setIntervalбесконечно.

Как внутренний браузер это делает?

Я объясню вкратце.

Чтобы понять, что вы должны знать об очереди событий в JavaScript. В браузере реализована очередь событий. Всякий раз, когда событие запускается в js, все эти события (например, щелчок и т. Д.) Добавляются в эту очередь. Когда вашему браузеру нечего выполнять, он берет событие из очереди и выполняет их одно за другим.

Теперь, когда вы звоните setTimeoutилиsetInterval ваш обратный вызов регистрируется в таймере в браузере, он добавляется в очередь событий по истечении заданного времени, и в конечном итоге javascript берет событие из очереди и выполняет его.

Это происходит так, потому что движок javascript является однопоточным и может выполнять только одну вещь за раз. Таким образом, они не могут выполнять другие JavaScript и отслеживать ваш таймер. Вот почему эти таймеры зарегистрированы в браузере (браузер не является однопоточным), и он может отслеживать таймер и добавлять событие в очередь после истечения таймера.

то же самое происходит, setIntervalтолько в этом случае событие снова и снова добавляется в очередь по истечении заданного интервала, пока оно не будет очищено или страница браузера обновлена.

Заметка

Параметр задержки, который вы передаете этим функциям, является минимальным временем задержки для выполнения обратного вызова. Это связано с тем, что после истечения времени таймера браузер добавляет событие в очередь, которая будет выполняться механизмом 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);

Этот новый код приостановит его на 1 секунду и тем временем запустит ваш код.

Я внесу свой вклад, потому что это помогает мне понять, что я делаю.

Чтобы сделать слайд-шоу с автоматической прокруткой, которое длится 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;
    }
}