setTimeout() 方法在for循环中失效？

一、代码先行

{
     var progressNum=0;
     var that = this;
     var timestep=100;
     for (progressNum = 0; progressNum <= 100; progressNum++)
    {
       timestep = (100 - progressNum) * 10;
       var myvar = setTimeout(function(){
        that.setData(
          {
            progress:progressNum
          }
        )
      console.log(progressNum);
      console.log("setTimeout success!")
       },timestep);
      console.log('timestep'+timestep);
    }

二、运行结果

。。。

。。。

三、代码分析

想使用以上代码实现：在for循环中不断改变timestep的值，使得时延不断减少。

但从结果看，未能达到预期效果！从控制台的输出看，timestep的参数输出是正常的，但是progressNum的输出却是不正常的，只输出了一个跳出循环时的最大值101，没有从0开始递增。同时console.log('timestep'+timestep);语句执行完后才去执行 console.log(progressNum);和 console.log("setTimeout success!")似乎与程序的顺序执行规则不符合，因为后面两个语句在前面。

问题分析，本质上是由于for循环中的setTimeout()的执行和for循环的执行是独立的，也就是说在第一次执行setTimeout()的时候，for循环并没有停止下来，而是以极快的速度继续执行下去，等到setTimeout(）等待时间到了，for循环已经执行完毕，progressNum已经变为101。导致这个错误的原因就是对setTimeout()的原理理解不清楚，把它当作C语言中的delay（）函数使用。