使用JavaScript在特定的延迟后执行脚本

是否有类似于jQuery delay()wait()的JavaScript方法(在特定时间内延迟脚本的执行)?

477060 次浏览

你需要使用setTimeout并传递给它一个回调函数。你不能在javascript中使用sleep的原因是你会阻止整个页面在此期间做任何事情。这不是个好计划。使用Javascript的事件模型,并保持愉快。不要反抗!

有以下几种:

setTimeout(function, milliseconds);

函数,该函数可以传递函数执行的时间。

看到:窗口setTimeout()方法

你也可以使用setinterval ()以固定的间隔重复运行一些代码。

再展开一点…你可以直接在setTimeout调用中执行代码,但正如@patrick所说,你通常分配一个回调函数,像这样。时间单位是毫秒

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

只是补充其他人已经说过的setTimeout: 如果将来要调用带参数的函数,则需要设置一些匿名函数调用。< / p >

您需要将该函数作为参数传递,以便稍后调用它。实际上,这意味着名字后面没有括号。下面将立即调用警报,并显示'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'。

我愿补充前面的意见:

JavaScript中的setTimeout()函数本身并不暂停脚本的执行,而只是告诉编译器在将来的某个时候执行代码。

JavaScript中没有一个函数可以真正暂停执行。然而,你可以编写自己的函数,通过使用Date()函数并添加所需的时间间隔来执行类似于无条件循环的操作,直到到达时间。

如果你真的想要有一个阻塞(同步)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>

如果你只需要测试一个延迟,你可以使用这个:

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

然后如果你想延迟2秒,你可以这样做:

delay(2000);

但对生产来说可能不是最好的。请在评论中详细说明

我有一些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

为什么不能把代码放在承诺后面呢?(在我的脑海中输入)

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。 显然这是一个例子;你可以在匿名函数中做任何你想做的事情。< / p >

我真的很喜欢Maurius关于调用setTimeout的三种不同方法的解释(最高赞的反应)。

在我的代码中,我想在AJAX保存事件完成时自动自动导航到上一页。保存事件的完成在CSS中有一个轻微的动画,表明保存成功。

在我的代码中,我发现了前两个例子之间的差异:

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

这个函数不会等待超时——无论我为延迟输入什么数字,back()几乎都会立即被调用。

但是,将其更改为:

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

这正是我所希望的。

这并不特定于back()操作,alert()也是如此。基本上,对于第一种情况中使用的alert(),延迟时间将被忽略。当我解散弹出框时,CSS的动画继续。

因此,我建议使用他描述的第二或第三种方法,即使你使用的是内置函数而不是参数。

正如其他人所说,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);

delay(1000).then(() => {
// your code...
});

或者没有函数

new Promise(r => setTimeout(r, 1000)).then(() => {
// your code ...
});
// or
await new Promise(r => setTimeout(r, 1000));
// your code...