javascript - js实现for循环1-10, 延迟500ms展示结果, 但结果总是错误的, 求办法

Question

描述如题

代码如下

function test() {
  for(var i=0; i<10; i++) {
    setTimeout(function(){
      (function (m) {
        console.log(m);
      })(i)
    }, 500)
  }
}
test();

执行结果

请教下解决办法, 并指出错误位置, 谢谢!

Answer 1

错的原因是对JS变量提升的概念理解不透彻

function test() {
  for(var i=0; i<10; i++) {
    setTimeout(function(){
      (function (m) {
        console.log(m);
      })(i)
    }, 500)
  }
}
test();

换成let就好，每次循环都创建一个块级作用域

Answer 2

用递归来代替循环

function delayLoop(factory, time, count, _i = 0, _timer = []) {
    if(_i >= count) return _timer
    var timer = setTimeout(() => {
        _timer[_i] = undefined
        factory(_i)
        _i ++
        delay(factory, time, count, _i, _timer)
    }, time)
    _timer.push(timer)
    return _timer
}

// usage
var count = 10
var interval = 1000
var timer = delayLoop((i) => {
  console.log(i)
}, interval, count)
// stop
setTimeout(() => timer.filter(item => !!item).forEach(t => clearTimeout(t)), 3200)

Answer 3

错误原因和这篇文章一样 https://segmentfault.com/a/11...

Answer 4

for(let i = 0; i < 10; i++) {
    setTimeout(function(){
        console.log(i)
    },500)
}

最好的办法就是直接用let就好了

而下边这种写法

function test() {
  for(var i=1; i<11; i++) {
    setTimeout((function(){
        console.log(i);
    })(), 500)
  }
}

相当于

function test() {
  for(var i=1; i<11; i++) {
    setTimeout(console.log(i), 500)
  }
}

是不会有延时的。

除非：

function test() {
  for(var i=1; i<11; i++) {
    setTimeout((function(i){
        return function() {
            console.log(i);
        } 
    })(i), 500)
  }
}

明白了了吧，但是还是用let吧，骚年！

Answer 5

错误原因和这篇文章一样 https://segmentfault.com/a/11...