Функция wait () или sleep () в jquery?

101

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

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

Там в любом случае?

Стивен Мосс
источник

Ответы:

187

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.
черри
источник
2
в настоящий момент это плохое решение, потому что оно теряет преимущество контроля jquery над анимацией, например .stop (). гораздо лучшее решение .delay ()
user151496
7
@ user123blahblah ... это ПРАВИЛЬНОЕ решение вопроса (которое не имеет ничего общего с анимацией). .delay делает jack beans вне очереди анимации. Тот, кто поддержал ваш ошибочный комментарий, ввел себя в заблуждение.
IncredibleHat
34

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

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

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

Оскар Годсон
источник
1
Также Стивен, вы хотите, чтобы в .removeClass('load')противном случае вы добавили оба класса load и done, что, вероятно, нежелательно. Если вы действительно ждете завершения асинхронного действия, лучше всего сделать .addClass, КОГДА оно завершится и будет успешным, если нет .addClass ('error'), возможно, идея
Гэри Грин
52
Функция jQUery "delay ()" никоим образом не предоставляет ничего похожего на универсальное средство "ожидания". Это часть системы анимации и применяется только к очереди анимации. Функция всегда немедленно возвращается, и выполнение продолжается без пауз.
Pointy
22

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

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

Использовать это:

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

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

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

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

Дж. Лоу
источник
21

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

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

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

$('#myElement').addClass('load').wait(2000).addClass('done');
сумасшедший
источник
2
Большое спасибо, мэдли!
phil294 07
2

Есть функция, но она дополнительная: 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);
    });
};
mrzmyr
источник
2

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

.addClass("load").delay(2000).addClass("done");
Блог веб-разработчиков
источник
0

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

$(".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>

Саша Фирсов
источник
-1

Используя функцию setTimeout, например, посетите здесь, например

Абхинав Ранджан Синха
источник
21
Считается, что лучше не полагаться на ссылку для большей части вашего ответа
Джеймс Дженкинс
6
Чтобы поддержать комментарий @JamesJenkins, это связано с тем, что ссылки не всегда надежны. Если кто-то должен добавить ссылку, лучше также включить в ответ сам код.
ТАСС