for循环包裹setTimeout计时器 - 蓝蓝设计_UI设计公司

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


for循环包裹setTimeout计时器

2019-7-19 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

for(var i = 0; i < 5; i++) {
console.log(i)
}

这样for循环可打印出 0 - 4的结果

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
console.log(i)
    }, i * 1000)
}

但这样只能间隔一秒打印出5个5

原因在于 setTimeout是异步,等for循环全部完成 i 后才会执行

解决方法可以将 for循环中的var 变成 let

let只作用于for循环内,这样每次付给setTimeout的值都是当前值

或者在setTimeout外再包一层function

for(var i = 0; i < 5; i++) {
    (function(i) {setTimeout(function() {
console.log(i)
    }, i * 1000)})(i)

}

将 i 作为参数传到setTimeout中运行 这样就可以得到每隔1秒加1的log结果了
蓝蓝设计www.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: for循环包裹setTimeout计时器 « Control Center「元辰」数据概念控制中心 | 设计师必须了解的色彩理论»


订阅Rss
秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 159彩票 奔驰彩票开奖 北京福彩网 秒速赛车官网