jQuery: зачекайте / затримте 1 секунду без виконання коду

129

Я не можу .delayзаставити метод працювати в jQuery:

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

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

— Брайан Грем
джерело

спробуйте використовувати setTimeout у зворотному

— дзвінку

яку версію jquery ви використовуєте?

— L7ColWinters

1

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

— JoJa

@JoJa: Ви маєте рацію в головному пункті, проте форма аргументу show (і приховування) не використовує чергу ефектів.

— Джей Томтен

3

Будь ласка, вкажіть, що ви намагаєтесь досягти із запізненням. Весь JavaScript, що виконується на одному потоці, і заморожування його протягом X секунд може спричинити несприятливий досвід користувача.

— Дмитро Шкуропацький

176

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

Замість того, щоб використовувати цикл час, вам потрібно рекурсивно викликати метод, який здійснює перевірку щосекунди, використовуючи 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 не порушує потік виконання. Великий код Нісснера для отримання цього невдалого умови стали справжніми!

— Габрер

Якщо вам не потрібно порушувати потік виконання, ви можете просто скористатися setTimeout().

— Джошуа Пінтер

Я завжди отримую "перевірка - це не функція", хоча моя функція перевірки має два параметри

— Чорний

211

Ви також можете просто затримати деяку операцію таким чином:

setTimeout(function (){

  // Something you want delayed.

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

— Метт Січ
джерело

7

Просто FYI, це не порушує хід виконання, тому якщо вам потрібно "зупинити все" на кілька секунд, вам знадобиться щось на кшталт того, що написав Niessner.

— Джошуа Пінтер

Так ... його зворотний виклик функції і не блокується. Дякую за відповідь, це вирішило мою проблему.

— Бертус Крюгер

якщо частота буде надзвичайно короткою, і ми очікуємо, що ця функція буде працювати назавжди, чи зрештою вона підірве стек?

— Зайчик із самогубством

16

ES6 setTimeout

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

Редагувати: 204586560000 мс - це приблизний час між початковим запитанням та цією відповіддю ... якщо припустити, що я правильно розрахував.

— thedanotto
джерело

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's 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 - це асинхронна мова програмування, тому ви не можете зупинити виконання на деякий час; єдиний спосіб, коли ви можете [pseudo] зупинити виконання, використовує 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
}

— Ентоні Де Смет
джерело