javascript - for循环不允许setTimeout执行

Question

我有下面的函数，它在给定的特定时间记录传递给函数的句子中的字符，看看下面的函数:

function print_string(param , timer) {

  var strt_point = 0,
      str_len = param.length,
      self = this;


  //typewritter();

  typeit();

  function typeit() {

    setTimeout(function(){

      console.log(param.substring(strt_point).charAt(0)); 

      if(strt_point < str_len ) {
        strt_point++; 
        typeit()
      }
    } , timer);
  } 

}

var str = print_string("hey there , whats up , hows the weather in Manhatten" , 50);
console.log(str);

上面的程序员工作正常，现在如果我在上面的程序 I.E. 中添加一个 for 循环将 setTimeout 包裹在 for 循环中，

function print_string(param , timer) {

  var strt_point = 0,
      str_len = param.length,
      self = this;

  for(var i = 0 ; i < str_len ; i++) {

  //typewritter();

  typeit();

  function typeit() {

    setTimeout(function(){

      console.log(param.substring(strt_point).charAt(0)); 

      if(strt_point < str_len ) {
        strt_point++; 
        typeit()
      }
    } , timer);
  } 

}

var str = print_string("hey there , whats up , hows the weather in Manhatten" , 50);
console.log(str);

所有字符一次打印出来，为什么？

为什么 for 循环不遵守 setTimeout 间隔？谁能解释一下？

Answer 1

如果您希望 timer 参数充当实际间隔，请使用:

function print_string(param, timer) {

  for(var i = 0 ; i < param.length ; i++) {

    setTimeout((function(char){

      return function () {

        console.log(char);

      }

    })(param.charAt(i)), timer * i);  
  }
}

var str = print_string("hey there , whats up , hows the weather in Manhatten" , 500);

这是一个fiddle .

令您感到困惑的是 for 循环会立即发生，或者与处理器允许的一样快。当 setTimeout 处理程序执行时，它的范围与您可能期望的范围不同。作用域不再在 for 循环内(因为那发生在处理器的不同滴答中)所以打印变量丢失了。为了解决这个问题，我使用了所谓的闭包。我正在动态构建一个函数，以打印我需要的特定变量，并将其作为参数传递给 setTimeout。

阅读更多关于闭包的信息 here .