我想创建一个效果,你可以看到屏幕上写出的文字;我想通过一次打印一个字符来实现这一点。我已经成功地一次打印了一个角色,但由于以前没有定时器经验,因此添加定时器是一项艰巨的任务。并且结果是“未定义”一个接一个地打印出来所以我猜它不能拿起'句子[i]'由于某种原因我不知道..
以下是我正在使用的代码:
function printSentence(id, sentence){
for(var i = 0; i < sentence.length; i++){
(function(index) {
setTimeout(function() {
document.getElementById(id).innerHTML+=sentence[i];
}, 100);
})(i);
}
}
答案 0 :(得分:3)
您的代码存在两个问题:
您正在闭包中创建变量index
,但您在回调中使用变量i
,该变量将在执行回调之前更改。
你在100毫秒后开始所有的超时,所以它们几乎会在同一时间运行。
所以:
function printSentence(id, sentence){
for(var i = 0; i < sentence.length; i++){
(function(index) {
setTimeout(function() {
document.getElementById(id).innerHTML+=sentence[index];
}, 100 * i);
})(i);
}
}
答案 1 :(得分:2)
变量i
不在闭包中的函数范围内。由于您通过i
将index
传递给该功能,因此您可以使用index
。
function printSentence(id, sentence){
for(var i = 0; i < sentence.length; i++){
(function(index) {
setTimeout(function() {
document.getElementById(id).innerHTML+=sentence[index];
}, 100);
})(i);
}
}
编辑:
这是因为对setTimeout
的调用与以前的调用不同步,而是使用setInterval
方法,或者将timeout
增加一些因素。
使用setInterval:这很好用
<html>
<script>
function printSentence(id, sentence){
var index=0;
var intObject= setInterval(function() {
document.getElementById(id).innerHTML+=sentence[index];
index++;
if(index==sentence.length){
clearInterval(intObject);
}
}, 100);
}
</script>
<body>
<div id="diii" onclick="printSentence('diii','helloworld');" style="height:500;width:500">
</div>
</body>
</html>
答案 2 :(得分:1)
尝试以下(jsfiddle example):
function doWithInterval(id, sentence)
{
var f;
f= function(i){
document.getElementById(id).innerHTML+=sentence[i];
if(i+1==sentence.length)
return;
window.setTimeout(function(){f(i+1);},500);
}
f(0);
}
doWithInterval('input','lama ani');
答案 3 :(得分:0)
怎么样:
var message="Hello World!";
function printMessage(message, seconds){
var i=0, len=message.length, wait=seconds*1000;
function print(){
if (i<len){
console.log(message[i]);
setTimeout(print, wait);
i+=1;
}
};
print();
}
printMessage(message, 1);
而不是将其记录到控制台,您应该将其添加到目标的textContent。