javascript - 在 for 循环中使用 setTimeout

标签 javascript node.js settimeout

我正在尝试编写一个函数,打印 5 等待 1 秒,打印数字 4 等待 2 秒,打印数字 3 等待 3 秒,依此类推

我写了这个函数:

for(let i=5;i>0;i--){
   setTimeout(()=>{
   let localTime = new Date().toLocaleString();
    console.log(`${i} - ${localTime}`)
  },5-i*1000);
}

打印:

'5 - 10/30/2019, 11:10:17 AM'
'4 - 10/30/2019, 11:10:17 AM'
'3 - 10/30/2019, 11:10:17 AM'
'2 - 10/30/2019, 11:10:17 AM'
'1 - 10/30/2019, 11:10:17 AM'

我写了这组声明:

console.log(new Date().toLocaleString());

 setTimeout(()=>{
  let localTime = new Date().toLocaleString();
    console.log(`${5} - ${localTime}`)
},1000)

setTimeout(()=>{
  let localTime = new Date().toLocaleString();
    console.log(`${4} - ${localTime}`)
},2*1000)

setTimeout(()=>{
  let localTime = new Date().toLocaleString();
    console.log(`${3} - ${localTime}`)
},3*1000)
setTimeout(()=>{
  let localTime = new Date().toLocaleString();
    console.log(`${2} - ${localTime}`)
},4*1000)
setTimeout(()=>{
  let localTime = new Date().toLocaleString();
    console.log(`${1} - ${localTime}`)
},5*1000)

这些打印:

'10/30/2019, 11:13:45 AM'
'5 - 10/30/2019, 11:13:46 AM'
'4 - 10/30/2019, 11:13:47 AM'
'3 - 10/30/2019, 11:13:48 AM'
'2 - 10/30/2019, 11:13:49 AM'
'1 - 10/30/2019, 11:13:50 AM'

第二组语句将时间增加 1 秒,但 for 循环中设置的超时没有执行。

如何实现该功能以及我哪里出错了?

最佳答案

操作顺序

5 - 1 * 1000
5 - (1*1000)
5 - 1000
-995

需要有括号

},(5-i) * 1000);

没有 for 循环的更好方法是创建一个函数并让计时器递归调用它直到完成。

function countDown (max) {
   function execute () {
     let localTime = new Date().toLocaleString();
     console.log(`${max} - ${localTime}`)
     max -= 1
     if (max>0) window.setTimeout(execute, 1000)
   }
   execute()
}

countDown(5);

关于javascript - 在 for 循环中使用 setTimeout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58629739/

相关文章:

javascript - 对动态内容多次使用相同的模态代码

javascript - 关于从 DOM 对象中 trim 大量文本的建议

php - 如何在javascript中显示多行文件内容

html - 通过node.js和sqlite3验证用户名和密码

jquery - JS/jQ 处理大量 setTimeouts 的更有效方法

javascript - jQuery 文本输入?

ruby - 用于抓取的 Node.js 或 Ruby

javascript - 手动请求模块与使用 browserify 动态调用模块有何不同?

javascript - jQuery .each 中带有 setTimeout() 的可变计时器

javascript - 一旦父组件的获取调用完成,如何提醒子组件? ReactJS