我想在while循环中添加一个delay/sleep:
我是这样试的:
alert('hi');
for(var start = 1; start < 10; start++) {
setTimeout(function () {
alert('hello');
}, 3000);
}
只有第一种情况是正确的:在显示alert('hi')后，它将等待3秒，然后alert('hello')将显示，但随后alert('hello')将不断重复。
我想要的是，在警报('hello')显示3秒后警报('hi')，然后它需要等待3秒的第二次警报('hello')，以此类推。
当前回答
下面是我用来循环数组的函数:
function loopOnArrayWithDelay(theArray, delayAmount, i, theFunction, onComplete){
if (i < theArray.length && typeof delayAmount == 'number'){
console.log("i "+i);
theFunction(theArray[i], i);
setTimeout(function(){
loopOnArrayWithDelay(theArray, delayAmount, (i+1), theFunction, onComplete)}, delayAmount);
}else{
onComplete(i);
}
}
你可以这样使用它:
loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
//Do something with item
}, function(i){
//Do something once loop has completed
}
其他回答
这个脚本适用于大多数情况
function timer(start) {
setTimeout(function () { //The timer
alert('hello');
}, start*3000); //needs the "start*" or else all the timers will run at 3000ms
}
for(var start = 1; start < 10; start++) {
timer(start);
}
在ES6中，你可以这样做:
对于(设I = 0;I <= 10;我+ +){ setTimeout(函数(){ console.log(我); },我* 3000) }
在ES5中，你可以这样做:
For (var I = 0;I <= 10;我+ +){ (函数(i) { setTimeout(函数(){ console.log(我); },我* 3000) }) (); ｝
原因是，let允许您声明限制在块语句或使用它的表达式范围内的变量，而不像var关键字那样全局定义变量，或局部定义整个函数，而不考虑块范围。
这是可行的
for (var i = 0; i < 10; i++) {
(function(i) {
setTimeout(function() { console.log(i); }, 100 * i);
})(i);
}
试试这把小提琴:https://jsfiddle.net/wgdx8zqq/
<！DOCTYPE html > < html > 身体< > <按钮onclick = " myFunction ()”> > < /按钮试试 < p id = "演示" > < / p > <脚本> 函数myFunction() { (var = 0;我< 5;我+ +){ Var sno = i+1; (函数myLoop (i) { setTimeout(函数(){ 警报(我);//在这里完成你的功能 }, 1000 *我); }) (sno); ｝ ｝ > < /脚本 < /身体> < / html >
因为ES7有一个更好的方法来等待循环:
// Returns a Promise that resolves after "ms" Milliseconds
const timer = ms => new Promise(res => setTimeout(res, ms))
async function load () { // We need to wrap the loop into an async function for this to work
for (var i = 0; i < 3; i++) {
console.log(i);
await timer(3000); // then the created Promise can be awaited
}
}
load();
当引擎到达await部分时，它设置一个超时并停止async函数的执行。然后，当超时完成时，继续执行。这是非常有用的，因为你可以延迟(1)嵌套循环，(2)有条件的，(3)嵌套函数:
异步函数任务(i) {// 3 等待计时器(1000); console.log('任务${i}完成! '); ｝ 异步函数main() { 对于(设I = 0;I < 100;I += 10) { For(令j = 0;J < 10;j++) {// 1 如果(j % 2) {// 2 等待任务(i + j); ｝ ｝ ｝ ｝ main (); 函数定时器(ms){返回新的承诺(res => setTimeout(res, ms));｝
MDN参考资料
虽然ES7现在被NodeJS和现代浏览器支持，但你可能想用BabelJS编译它，这样它就可以在任何地方运行。
