Виконати сценарій після конкретної затримки за допомогою JavaScript

Чи існує якийсь метод JavaScript, подібний до jQuery delay()або wait()(для затримки виконання сценарію на певний час)?

Є наступне:

setTimeout(function, milliseconds);

функція, яка може пройти час, після якого функція буде виконуватися.

Див.: Віконний setTimeout()метод .

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

Вам потрібно передати функцію як аргумент, щоб вона була викликана пізніше. Фактично це означає без дужок за назвою. Нижче перелічено повідомлення одразу, і він відобразить "Привіт світ":

var a = "world";
setTimeout(alert("Hello " + a), 2000);

Щоб виправити це, ви можете або ввести ім'я функції (як це робив Flubba), або ви можете використовувати анонімну функцію. Якщо вам потрібно передати параметр, вам доведеться використовувати анонімну функцію.

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

Але якщо ви запустите цей код, ви помітите, що через 2 секунди спливаюче вікно скаже «Hello Stack Overflow». Це тому, що значення змінної a змінилося за ці дві секунди. Щоб сказати "Hello world" через дві секунди, вам потрібно використовувати такий фрагмент коду:

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

Він зачекає 2 секунди, а потім спливає "Привіт, світ".

Просто щоб трохи розширити ... Ви можете виконати код безпосередньо під час setTimeoutвиклику, але як @patrick говорить , ви зазвичай призначаєте функцію зворотного дзвінка, як це. Час - мілісекунди

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

Якщо ви дійсно хочете мати функцію блокування (синхронну) delay(для чого б то не було), чому б не зробити щось подібне:

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

Вам потрібно використовувати setTimeout і передати йому функцію зворотного дзвінка. Причина, коли ви не можете використовувати сон у javascript, полягає в тому, що ви заблокували всю сторінку тим часом нічого не робити. Не гарний план. Використовуйте модель події Javascript і залишайтеся щасливими. Не боройтеся з цим!

Ви також можете скористатися window.setInterval (), щоб регулярно запускати деякий код.

Щоб додати до попередніх коментарів, я хотів би сказати наступне:

The setTimeout()Функція в JavaScript не зупиняє виконання сценарію на собі, а лише говорить компілятору , щоб виконати код коли - небудь в майбутньому.

Не існує функції, яка фактично може призупинити виконання, вбудоване в JavaScript. Однак ви можете написати власну функцію, яка робить щось на кшталт безумовного циклу до досягнення часу, скориставшись Date()функцією та додавши необхідний інтервал часу.

Якщо вам потрібно лише перевірити затримку, ви можете скористатися цим:

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

І тоді, якщо ви хочете затримати на 2 секунди, ви робіть:

delay(2000);

Хоча це може бути не найкращим для виробництва. Детальніше про це в коментарях

чому ти не можеш поставити код за обіцянкою? (набрана вгорі голови)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

Проста відповідь:

setTimeout(
    function () {
        x = 1;
    }, 1000);

Наведена вище функція чекає 1 секунди (1000 мс), а потім встановлює х на 1. Очевидно, що це приклад; ви можете робити все, що завгодно, всередині анонімної функції.

Мені дуже сподобалося пояснення Маврія (найвища відповідь) трьома різними методами виклику setTimeout.

У своєму коді я хочу автоматично перейти на попередню сторінку після завершення події збереження AJAX. Завершення події збереження містить незначну анімацію в CSS, що свідчить про те, що збереження було успішним.

У своєму коді я знайшов різницю між першими двома прикладами:

setTimeout(window.history.back(), 3000);

Цей не чекає тайм-ауту - назад () викликається майже одразу, незалежно від того, яке число я вставлю для затримки.

Однак, змінивши це на:

setTimeout(function() {window.history.back()}, 3000);

Це робить саме те, на що я сподівався.

Це не характерно для операції back (), те ж саме відбувається і з операцією alert(). В основному при alert()використанні в першому випадку час затримки ігнорується. Коли я відхиляю спливаюче вікно, анімація для CSS продовжується.

Таким чином, я б рекомендував другий чи третій метод, який він описує, навіть якщо ви використовуєте вбудовані функції та не використовуєте аргументи.

У мене були кілька команд ajax, які я хотів запустити із затримкою між ними. Ось простий приклад одного із способів зробити це. Я готовий бути зірваним на клаптики, хоча за свій нетрадиційний підхід. :)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

Ви можете скопіювати блок коду та вставити його у вікно консолі та побачити щось на зразок:

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

Найпростіше рішення викликати свою функцію із затримкою:

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

функція затримки:

/**
 * delay or pause for some time
 * @param {number} t - time (ms)
 * @return {Promise<*>}
 */
const delay = async t => new Promise(resolve => setTimeout(resolve, t));

використання внутрішньої asyncфункції:

await delay(1000);

Як інакше сказано, setTimeout - це ваша найбезпечніша ставка.
Але іноді ви не можете розділити логіку на нову функцію, тоді ви можете скористатися Date.now (), щоб отримати мілісекунди і зробити затримку самостійно ....

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click OK....');
delay(5000);
alert('# Im back # date:' +new Date());