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

2019-10-20 08:03发布

我需要一个字母写的文字之一,暂停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