Блог

Я хочу добавить класс, подождать 2 секунды и добавить другой класс.

 .addClass("load").wait(2sec).addClass("done");
  

Есть ли какой-нибудь способ?

setTimeout выполнит некоторый код после задержки в некоторый период времени (измеряемый в миллисекундах). Однако важное замечание: из-за природы javascript остальная часть кода продолжает выполняться после установки таймера:

 $('#someid').addClass("load");

setTimeout(function(){
  $('#someid').addClass("done");
}, 2000);

// Any code here will execute immediately after the 'load' class is added to the element.
  

Это было бы .delay() .

http://api.jquery.com/delay/

Если вы делаете что-то с AJAX, вам действительно не следует просто автоматически записывать «готово», вам действительно следует дождаться ответа и посмотреть, действительно ли это сделано.

delay () не выполнит задание. Проблема с delay() заключается в том, что она является частью системы анимации и применяется только к очередям анимации.

Что, если вы хотите подождать, прежде чем выполнять что-то за пределами анимации??

Используйте это:

 window.setTimeout(function(){
                 // do whatever you want to do     
                  }, 600);
  

Что происходит?: В этом сценарии он ожидает 600 миллисекунд перед выполнением кода, указанного в фигурных скобках.

Это очень помогло мне, как только я разобрался в этом, и надеюсь, что это поможет и вам!

ВАЖНОЕ ЗАМЕЧАНИЕ: ‘window.setTimeout’ выполняется асинхронно. Имейте это в виду при написании своего кода!

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

https://github.com/madbook/jquery.wait

позволяет сделать это:

 $('#myElement').addClass('load').wait(2000).addClass('done');
  

Функция есть, но она дополнительная:http://docs.jquery.com/Cookbook/wait

Этот небольшой фрагмент позволяет вам подождать:

 $.fn.wait = function(time, type) {
    time = time || 1000;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};
  

Я нашел в Интернете функцию под названием sleep function и не знаю, кто ее создал. Вот она.

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

sleep(2000);
  

Вы можете использовать .delay() функцию.
Это то, что вам нужно:

 .addClass("load").delay(2000).addClass("done");
  

Плагин xml4jQuery предоставляет метод sleep (ms, обратный вызов). Оставшаяся цепочка будет выполнена после периода ожидания.

 $(".toFill").html("Click here")
                .$on('click')
                .html('Loading...')
                .sleep(1000)
                .html( 'done')
                .toggleClass('clickable')
                .prepend('Still clickable <hr/>');  

 .toFill{border: dashed 2px palegreen; border-radius: 1em; display: inline-block;padding: 1em;}
        .clickable{ cursor: pointer; border-color: blue;}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdn.xml4jquery.com/ajax/libs/xml4jquery/1.1.2/xml4jquery.js"></script>
        <div class="toFill clickable"></div>  

Я думаю, у меня есть кое-что, что может вам помочь, и это работа с deferred. Используется с $ .когда она приостанавливается до завершения задачи, а затем продолжается: выполняется поиск отложенных элементов. Вы также можете связывать события одно за другим, ожидая завершения предыдущего, чтобы перейти к следующему.

 $.when( $('#element').addClass('load'), $('#element').addClass('done') ).then(function(x) { console.info('Already done') });