jQuery: ожидание / задержка 1 секунду без выполнения кода


129

Я не могу заставить этот .delayметод работать в jQuery:

$.delay(3000); // not working
$(queue).delay(3000); // not working

Я использую цикл while, чтобы дождаться, пока неконтролируемое изменяющееся значение не станет больше или равным другому, и я не могу найти способ вызвать выполнение в течение X секунд.


попробуйте использовать setTimeout в
— обратном вызове

какую версию jquery вы используете?
— L7ColWinters

1
это не то, для чего предназначена функция задержки, она предназначена для использования между событиями jquery в очереди (например, fade (). delay (). show ()). Вам нужна функция setTimeOut.
— JoJa

@JoJa: Вы правы в главном, однако форма без аргументов show (и hide) не использует очередь эффектов.
— Джей Томтен

3
Пожалуйста, укажите, чего вы пытаетесь достичь с задержкой. Весь JavaScript выполняется в одном потоке, и его замораживание на X секунд может вызвать неблагоприятные условия для пользователя.
— Дмитрий Шкуропатский

Ответы:


176

$ .delay используется для задержки анимации в очереди, а не для остановки выполнения.

Вместо использования цикла while вам нужно рекурсивно вызвать метод, который выполняет проверку каждую секунду, используя setTimeout:

var check = function(){
    if(condition){
        // run when condition is met
    }
    else {
        setTimeout(check, 1000); // check again in a second
    }
}

check();

1
Думаю, setTimeout достаточно.
— Jiemurat

3
Ты бомба, братан, это именно то, что мне нужно, чтобы исправить мой код.
— jemiloii

@Jiemurat и кто-либо еще в будущем: setTimeout не нарушает поток выполнения. Великий кодекс Нисснера получил это до тех пор, пока условия не стали реальностью!
— Габрер 05

Если вам не нужно прерывать поток выполнения, вы можете просто использовать setTimeout().
— Джошуа Пинтер

я всегда получаю «проверка не функция», хотя моя функция проверки имеет два параметра
— Black

210

Вы также можете просто отложить некоторые операции следующим образом:

setTimeout(function (){

  // Something you want delayed.

}, 5000); // How long do you want the delay to be (in milliseconds)? 

7
Просто к вашему сведению, это не нарушает поток выполнения, поэтому, если вам нужно «остановить все» на несколько секунд, вам понадобится что-то вроде того, что опубликовал Нисснер.
— Джошуа Пинтер

Да ... это обратный вызов функции и не блокирует. Спасибо за ответ, моя проблема решена.
— Бертус Крюгер

если частота очень мала и мы ожидаем, что эта функция будет работать вечно, не взорвет ли она стек?
— Suicide Bunny

16

ES6 setTimeout

setTimeout(() => {
  console.log("we waited 204586560000 ms to run this code, oh boy wowwoowee!");
}, 204586560000);

Изменить: 204586560000 мс - приблизительное время между исходным вопросом и этим ответом ... при условии, что я правильно рассчитал.


2
действительно приятно использовать приблизительное время от исходного вопроса до этого ответа
— Fuzzybear

9

delayФункция jQuery предназначена для использования с эффектами и очередями эффектов, см. delayдокументацию и пример в ней:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Если вы хотите наблюдать за изменениями переменной, вы можете сделать что-то вроде

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();

У setInterval есть второй обязательный параметр, время в миллисекундах;)
— sara_thepot

1
Спасибо @ sara.potyscki, исправлено.
— Джулиан Д.

@JulianD. Спасибо за это предложение. Я столкнулся с этим вопросом, пока искал решение. Это именно то, что мне нужно для моего проекта.
— Шерил Велес,

8

JavaScript setTimeout- очень хорошее решение:

function funcx()
   {
   // your code here
   // break out here if needed
   setTimeout(funcx, 3000);
   }

funcx();

delayФункция JQuery в основном используется для задержки анимации в очереди анимации JQuery.


5

delay()не останавливает поток кода, а затем повторно запускает его. В JavaScript нет практического способа сделать это. Все должно быть сделано с помощью функций, которые принимают обратные вызовы, о setTimeoutкоторых упоминали другие.

Цель jQuery delay()- заставить очередь анимации ждать перед выполнением. Так, например $(element).delay(3000).fadeIn(250);, заставит элемент исчезнуть через 3 секунды.


5

Только javascript Работает без jQuery

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sleep(miliseconds) {
                var currentTime = new Date().getTime();
                while (currentTime + miliseconds >= new Date().getTime()) {
                }
            }

            function hello() {
                sleep(5000);
                alert('Hello');
            }
            function hi() {
                sleep(10000);
                alert('Hi');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="hello();">Say me hello after 5 seconds </a>
        <br>
        <a href="#" onclick="hi();">Say me hi after 10 seconds </a>


    </body>
</html>

1
Циклическое ожидание в javascript - плохая идея! Все функции javascript будут остановлены во время выполнения цикла. Это будет иметь непредвиденные побочные эффекты. Намного лучше использовать неблокирующие функции, такие как setTimeout ().
— Кевин Г.

4

Javascript - это асинхронный язык программирования, поэтому вы не можете остановить выполнение на какое-то время; единственный способ [псевдо] остановить выполнение - использовать setTimeout (), который не является задержкой, а является «отложенным обратным вызовом функции».


2

Если вы используете функции ES6 и используете асинхронную функцию, вы можете эффективно остановить выполнение кода на определенное время с помощью этой функции:

const delay = millis => new Promise((resolve, reject) => {
  setTimeout(_ => resolve(), millis)
});

Вот как вы его используете:

await delay(5000);

Он остановится на запрошенное количество миллисекунд, но только если вы используете асинхронную функцию . Пример ниже:

const myFunction = async function() {
  // first code block ...

  await delay(5000);

  // some more code, executed 5 seconds after the first code block finishes
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.