Выполнение скрипта после определенной задержки с помощью JavaScript



есть ли какой-либо метод JavaScript, подобный jQuery delay() или wait() (чтобы задержать выполнение скрипта на определенное количество времени)?

574   13  

13 ответов:

есть следующее:

setTimeout(function, milliseconds);

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

посмотреть: окно setTimeout() метод.

просто чтобы добавить к тому, что все остальные говорили о setTimeout: Если вы хотите вызвать функцию с параметром в будущем, необходимо настроить некоторые анонимные вызовы функций.

вам нужно передать функцию в качестве аргумента для ее последующего вызова. По сути это означает без скобок за именем. Следующее вызовет предупреждение сразу, и он будет отображать "Hello world":

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 и передать ему функцию обратного вызова. Причина, по которой вы не можете использовать sleep в javascript, заключается в том, что вы блокируете всю страницу от чего-либо в то же время. Не очень хороший план. Используйте модель событий Javascript и оставайтесь счастливыми. Не сопротивляйся этому!

вы также можете использовать

чтобы добавить более ранние комментарии, я хотел бы сказать следующее :

The setTimeout() функция в JavaScript не приостанавливает выполнение скрипта как такового, а просто сообщает компилятору выполнить код когда-нибудь в будущем.

нет функции, которая может фактически приостановить выполнение, встроенное в JavaScript. Однако вы можете написать свою собственную функцию, которая делает что-то вроде безусловного цикла до тех пор, пока время не будет достигнуто с помощью

Если вам нужно только проверить задержку, вы можете использовать это:

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

и потом, если вы хотите задержать на 2 секунды, вы:

delay(2000);

не может быть лучшим для производства, хотя. Об этом в комментарии

простой ответ:

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

функция выше ждет 1 секунду (1000 мс), а затем устанавливает x в 1. Очевидно, это пример, вы можете делать все что угодно внутри анонимной функции.

почему вы не можете поставить код за обещание? (набрал в верхней части моей головы)

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

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

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

в моем коде я нашел различие между первыми двумя примерами:

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

этот не ждет тайм-аут--back () вызывается почти сразу, независимо от того, какой номер я ввел для задержки.

однако, изменив это на:

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

как другие сказали, setTimeout - это ваша самая безопасная ставка
Но иногда вы не можете отделить логику от новой функции, тогда вы можете использовать дату.теперь (), чтобы получить миллисекунды и сделать задержку самостоятельно....

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 ' +new Date());

Comments

    Ничего не найдено.