Я хочу добавить класс, подождать 2 секунды и добавить еще один класс.
.addClass("load").wait(2sec).addClass("done");
Там в любом случае?
Я хочу добавить класс, подождать 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().
Если вы делаете что-то AJAX, вам действительно не следует просто автоматически писать «готово», вам действительно нужно дождаться ответа и посмотреть, действительно ли это сделано.
.removeClass('load')противном случае вы добавили оба класса load и done, что, вероятно, нежелательно. Если вы действительно ждете завершения асинхронного действия, лучше всего сделать .addClass, КОГДА оно завершится и будет успешным, если нет .addClass ('error'), возможно, идея
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);
});
};
Вы можете использовать .delay()функцию.
Вот что вам нужно:
.addClass("load").delay(2000).addClass("done");
Плагин 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>
Используя функцию setTimeout, например, посетите здесь, например