Как установить задержку на 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();
    });
});
Комментарии к вопросу (4)
Решение

Использовать функции setTimeout():

var delayInMilliseconds = 1000; //1 second

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

Если вы хотите сделать это без функции setTimeout: см. Этот вопрос.

Комментарии (2)
setTimeout(function(){

}, 500); 

Поместите ваш код внутри { }

500 = 0,5 сек.

2200 = 2,2 секунды

и т. д.

Комментарии (0)

Эс-6 решение

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

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

в

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

в

Комментарии (1)

Есть два (в основном используется) типа функции таймер в JavaScript функции setTimeout и вход (другие)

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

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

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

clearTimeout и clearInterval оба эти методы принимают идентификатор, целое число, возвращенное из вышеуказанной функции функции setTimeout и вход

Пример:

функции setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

Если вы запустите приведенный выше код, вы увидите, что он предупреждает до функции setTimeout`, а затем после функции setTimeout` наконец он предупреждает - я функции setTimeout` после 1 сек (1000 мс)

Как вы можете заметить из примера в том, что функции setTimeout (...) является асинхронным, что означает, он не'т ждать таймера, чтобы получить прошло прежде чем переходить к следующему заявлению я.е предупреждение("и после того, как предыдущий метод setTimeout, то");`

Пример:

вход

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

Если вы запустите приведенный выше код, вы увидите, что он предупреждает перед использованием setInterval`, а затем после метода setInterval` наконец он предупреждает я через setInterval 5 раз через 1 сек (1000 мс), потому что функции setTimeout очистить таймер после 5 секунд, либо раз в 1 секунду вы получите оповещение я через setInterval бесконечно.

Как браузер внутренне делает?

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

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

Теперь, когда вы называете функции setTimeout или вход заказ обратного звонка вам зарегистрированы на таймер в браузере и он будет добавлен в очередь событие через заданное время истекает, и в конце концов JavaScript занимает событие из очереди и выполняет его.

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

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

Примечание

параметр задержки при передаче этих функций является минимальной задержкой время для выполнения обратного вызова. Это происходит потому, что после того, как таймер истекает браузер добавляет событие в очередь для исполнения JavaScript-движок, но выполнение обратного вызова зависит от вашего положение события в очереди и как двигатель является однопоточным это будет исполнять все события в очереди по одному.

Следовательно, ваш обратного вызова могут иногда занять больше, чем указанная задержка будет называться специально, когда другие блоки кода нить и, не дав ей времени осознать, что's там в очереди.

И как я уже упоминал JavaScript-это один поток. Так что, если вы блокируете поток надолго.

Такой код

while(true) { //infinite loop 
}

Пользователь может получить сообщение Страница не отвечает.

Комментарии (2)

Для синхронизации звонков вы можете использовать метод, приведенный ниже:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}
Комментарии (0)

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

Чтобы сделать автопрокрутку слайдов и 3 секунды ждать, я сделал следующее:


var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i
Комментарии (0)

Вот что я делаю, чтобы решить эту проблему. Я согласен, что это из-за ошибки синхронизации и необходимые паузы для выполнения кода.

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

Этот новый код будет сделать паузу на 1 секунду и время выполнения кода.

Комментарии (0)

Если вам нужно обновить, это еще одна возможность:

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);
Комментарии (0)