Я хочу додати клас, почекати 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')інакше додавання обох класів було завантажено і виконано, що, мабуть, небажано. Якщо ви дійсно чекали асинхронного дії до завершення, краще за все це зробити .addClass , коли він завершується , і успішно, якщо не .addClass ( «помилка») , може бути ідея
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 дає метод сну (мс, зворотний виклик). Залишився ланцюг буде виконуватися після періоду сну.
$(".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, наприклад, відвідайте, наприклад, тут