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);

上面的程序员工作正常，现在如果我在上面的程序中添加一个for循环。 在for循环中包装setTimeout ，

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。

Answer 2

我会尝试解脱：

您正在将一个包含30个字符的字符串传递给函数print_string，以便for循环将迭代并调用setTimeout 30次。 50ms后，将调用第一个setTimeout回调并输出字符串的第一个字符。变量strt_point将递增。然后将立即调用第二个for循环迭代的第二个setTimeout回调，因为strt_point已经增加，所以将打印第二个字符。

问题是，对于strt_point循环的所有迭代，您有一个变量for，以便在50ms后打印所有字符。

Answer 3

我想你想要这样的东西：

＆＃13;

var print_string = function ( param, interval ) {
  var
    i = 0,
    len = param.length,
    
    result = document.getElementById( 'result' ),
    
    // function called for every characters
    next = function () {
      // get the current character
      var char = param.charAt(i);
      
      // do what you want with them
      result.innerHTML += char;
      
      // if not the end of the string
      if ( ++i < len ) {
        // continue after the interval
        setTimeout( next, interval );
      }
    }

  next();
}

print_string( 'hey there , whats up , hows the weather in Manhatten!', 50 );

＆＃13;

<div id="result"></div>

＆＃13;

For循环不允许setTimeout执行

3 个答案: