环与内部设定的间隔(loop with set interval inside)

我需要一个字母写的文字之一，暂停3秒。 之间。

我试过，但不起作用。 后3秒。 整个文本在写入一次。

function thanks() {   
    $("#writer").text("");
    var txt = "Thanks for visiting !";

    for ( var i = 0; i < 22; i++) {
      setInterval(function(){
        var type = txt.substring(0, i);
        $("#writer").text(type);
      }, 3000);
    };
};

Answer 1:

你排队22个呼叫一次，以后一切发生3秒。 您只需建立间隔一次，输出在每次调用新的文本。 停止当你用完文字的间隔。

function thanks() {   
  $("#writer").text("");
  var txt = "Thanks for visiting !";
  var i = 0;

  var int = setInterval( function() 
  {
    ++i;
    if (i > txt.length)
    {
      clearInterval(int);
      return;
    }

    var type = txt.substring(0, i);
    $('#writer').text(type);
  }, 3000);
}

例如： http://codepen.io/paulroub/pen/AwLfx

Answer 2:

这是典型的封闭问题，每次你传递函数setInterval具有持久引用 i ，而不是它的一个副本，所以看到的相同值i在运行时（它在循环后的值为）。 你也不想用setInterval这里，你想要setTimeout 。

通常的答案是有关过别的东西的功能。 这些天，真的很容易，你可以使用Function#bind ，这是在ES5添加，但能够被正确匀老年JS引擎。

但除此之外，我们也有别的东西来解决：我们需要给每个功能不同的延迟，我们不能用3000为所有这些，否则他们会陆续所有火右一个三秒钟后！ 因此，而不是使用3000的延迟，我们可能要乘上i这样每个字符定于一前一后3000ms。

我还使用i <= txt.length而不是硬编码的数目。 这样一来，如果你改变了文本，也没有忘记更改号码，太危险。

但也没有必要（但不伤害）的; 后一个函数声明。 你需要他们的表情 ，不声明之后。

所以一起：

function thanks() {
    $("#writer").text("");
    var txt = "Thanks for visiting !";
    for (var i = 0; i <= txt.length; i++) {
        setTimeout(function(index) {
            var type = txt.substring(0, index);
            $("#writer").text(type);
        }.bind(null, i), i * 3000);
    };
}

Function#bind返回一个新的函数，调用它时，会调用原函数与给定this值（我们并不需要该位，因此null的第一个参数），然后不管争论，我们给它（我们传递给它i ，其功能接收作为所述index参数）。

活实施例 （I使用300而不是3000的例子中，3000是真宽间隔）

文章来源: loop with set interval inside