Выполнить скрипт после определенной задержки с использованием JavaScript
-
09-06-2019 - |
Вопрос
Есть ли какой-либо метод JavaScript, похожий на jQuery? delay()
или wait()
(чтобы задержать выполнение скрипта на определенное время)?
Решение
Есть следующее:
setTimeout(function, milliseconds);
функция, которой можно передать время, после которого функция будет выполнена.
Видеть: Окно setTimeout()
Метод.
Другие советы
Просто добавлю к тому, что все остальные сказали о setTimeout
:Если вы захотите в будущем вызывать функцию с параметром, вам необходимо настроить анонимные вызовы функций.
Вам необходимо передать функцию в качестве аргумента, чтобы ее можно было вызвать позже.Фактически это означает отсутствие скобок после имени.Следующее вызовет оповещение сразу и отобразит «Hello world»:
var a = "world";
setTimeout(alert("Hello " + a), 2000);
Чтобы исправить это, вы можете либо указать имя функции (как это сделал Флубба), либо использовать анонимную функцию.Если вам нужно передать параметр, вам придется использовать анонимную функцию.
var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";
Но если вы запустите этот код, вы заметите, что через 2 секунды во всплывающем окне появится надпись «Hello Stack Overflow».Это связано с тем, что значение переменной a изменилось за эти две секунды.Чтобы заставить его сказать «Привет, мир» через две секунды, вам нужно использовать следующий фрагмент кода:
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";
Он подождет 2 секунды, а затем появится всплывающее окно «Hello world».
Просто немного расширим...Вы можете выполнить код непосредственно в setTimeout
позвони, но как @Патрик говорит, что обычно вы назначаете функцию обратного вызова, вот так.Время миллисекунды
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 и будьте счастливы.Не боритесь с этим!
Вы также можете использовать окно.setInterval() для многократного запуска некоторого кода через регулярные промежутки времени.
В дополнение к предыдущим комментариям хочу сказать следующее:
А 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 мс), а затем устанавливает x равным 1.Очевидно, это пример;внутри анонимной функции вы можете делать все, что захотите.
Мне очень понравилось объяснение Мауриуса (ответ, получивший наибольшее количество голосов) с тремя различными методами вызова. setTimeout
.
В моем коде я хочу автоматически переходить на предыдущую страницу после завершения события сохранения AJAX.Завершение события сохранения сопровождается небольшой анимацией в 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
Самое простое решение для вызова вашей функции с задержкой:
function executeWithDelay(anotherFunction) {
setTimeout(anotherFunction, delayInMilliseconds);
}
Как уже было сказано, 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 ' +new Date());