Question

我需要逐个写一个文字，暂停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

这是经典的闭包问题，您传入setInterval的每个函数都有一个持久引用到i，而不是它的副本，所以它运行时会看到i（它在循环后的值）的相同值。你也不想在这里使用setInterval，你想要setTimeout。

通常的答案是让函数接近其他东西。这些天真的很简单，你使用Function#bind，这是在ES5中添加的，但可以为旧的JS引擎正确填充。

但除此之外，我们还有其他一些问题需要解决：我们需要为每个功能提供不同的延迟，我们不能为所有功能使用3000，或者他们都会解雇一个三秒钟之后又一次！因此，我们可能希望将其乘以i，而不是使用3000的延迟，因此每个字符都会安排在前一个字符之后的3000毫秒。

我也使用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会返回一个 new 函数，该函数在调用时会调用具有给定this值的原始函数（我们不需要该位，因此null作为第一个参数）然后我们给它的任何参数（我们传递它i，函数接收它作为index参数。）

Live Example （我在示例中使用了300而不是3000，其中3000是非常宽的间距）

Answer 2

你一次排队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

内部设置间隔的循环

2 个答案: