是否有任何类似于 jQuery 的 JavaScript 方法delay()
或wait()
(将脚本的执行延迟特定时间)?
15 回答
只是补充一下其他人所说的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 秒,然后弹出“Hello world”。
只是为了扩展一点......您可以直接在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 中使用 sleep 的原因是你会阻止整个页面在此期间做任何事情。不是一个好计划。使用 Javascript 的事件模型并保持快乐。不要打它!
您还可以使用window.setInterval()定期重复运行某些代码。
为了补充之前的评论,我想说以下几点:
JavaScript 中的setTimeout()
函数本身不会暂停脚本的执行,而只是告诉编译器在将来的某个时间执行代码。
没有一个函数可以真正暂停 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
正如其他人所说, 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());
延迟调用函数的最简单解决方案是:
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);