我需要一个字母写的文字之一,暂停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);
};
};
你排队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
这是典型的封闭问题,每次你传递函数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是真宽间隔)