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 ()
користувач151496

7
@ User123blahblah ... це ПРАВИЛЬНЕ вирішення питання (який не має нічого спільного з анімацією). .delay робить джек-боби поза чергою анімації. Хто б не заперечував ваш помилковий коментар, вводив себе в оману.
IncredibleHat

34

Це було б .delay().

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

Якщо ви робите речі AJAX тхо, вам дійсно не слід просто автоматично писати "зроблено", ви дійсно повинні дочекатися відповіді і побачити, чи справді це зроблено.


1
Також Стівен ви хочете, щоб .removeClass('load')інакше додавання обох класів було завантажено і виконано, що, мабуть, небажано. Якщо ви дійсно чекали асинхронного дії до завершення, краще за все це зробити .addClass , коли він завершується , і успішно, якщо не .addClass ( «помилка») , може бути ідея
Gary Green

52
Функція jQUery "затримка ()" жодним чином не забезпечує щось подібне до засобів загального призначення "чекати". Це частина анімаційної системи і стосується лише черги анімації. Функція завжди повертається негайно, а виконання продовжується без пауз.
Pointy

22

delay () не виконає роботу. Проблема із затримкою () - це частина анімаційної системи, і стосується лише черг анімації.

Що робити, якщо ви хочете зачекати, перш ніж виконати щось поза анімацією ??

Використовуй це:

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

Що відбувається ?: У цьому сценарії він чекає 600 мілісекунд, перш ніж виконати код, вказаний у фігурних дужках.

Це мені дуже допомогло, коли я зрозумів це, і сподіваюся, що це допоможе і вам!

ВАЖЛИВО ПРИМІТКА: 'window.setTimeout' відбувається асинхронно. Майте це на увазі, коли пишете свій код!


20

Зрозумійте, що це старе питання, але я написав плагін, щоб вирішити цю проблему, щоб хтось міг вважати корисним.

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

дозволяє вам це зробити:

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

2
Дуже дякую вам мадлі!
phil294

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


0

Плагін 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>


-1

Використовуючи функцію setTimeout, наприклад, відвідайте, наприклад, тут


21
Краще не покладатися на посилання на більшість ваших відповідей
Джеймс Дженкінс

6
Щоб створити резервну копію коментаря @JamesJenkins, це тому, що посилання не завжди є надійними. Якщо людина має додати посилання, краще також включити сам код у свою відповідь.
Тасс
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.