首先,我的HTML:
然后是我的Javascript:
<p id="p"></p>
<input id="input" />
<button onclick="fill()">Fill</button>
它的作用是从文本字段中取出文本,将包含空格的每个字符切割成数组,然后遍历数组,以50ms的间隔显示每个字符。该效果应该看起来像是在打字。
效果很好,但数组的值似乎不是。如果我输入&#34; abc123&#34;那么我希望它会立即回来,但我会得到:
undefinedundefinedundefinedundefinedundefinedundefined
使用function fill() {
var x = document.getElementById('input').value;
var y = x.split('');
for (var i = 0; i < y.length; i++) {
if (i == 0) {
setTimeout(function() {
document.getElementById('p').innerHTML = y[i];
},(i * 50));
}
setTimeout(function() {
document.getElementById('p').innerHTML += y[i];
},(i * 50));
}
}
,当我检查数组时,它看起来很好,当我检查console.log()
的各个数组值typeof
,但是当我检查string
时对于数组,我得到typeof
。也许这就是破坏它......
我已尝试在object
上使用toString()
,只是吐出&#34; [对象窗口]&#34;,我尝试像这样定义数组y[i]
和然后做var y = new Array;
,什么都行不通。我完全失去了。真的很想在这里得到一些帮助。谢谢!
答案 0 :(得分:3)
我认为必须有封闭问题。试试这个js代码。我在IIFE函数中将所有内容包装在循环内。我认为这里有很好的解释Please explain the use of JavaScript closures in loops
$('#addItem').click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) {
$('#editorRows').append(html);
}
});
return false;
});
$('a.deleteRow').live('click', function () {
$(this).parents('div.editorRow:first').remove();
return false;
});
答案 1 :(得分:1)
通过调用setTimeout,您将安排将来发生的事情。当您使用setTimeout
延迟执行的功能时,循环已经执行完毕,i
现在等于y.length
。因此,如果您在函数执行时输入test
,则会尝试将y[4]
添加为undefined
的字母。要修复它,你可以这样做:
function fill() {
var x = document.getElementById('input').value;
var y = x.split('');
console.log(y);
for (var i = 0; i < y.length; i++) {
timeOutAdd(y[i], i*50)
}
}
function timeOutAdd(c, delay){
setTimeout(function() {
document.getElementById('p').innerHTML += c;
}, delay);
}
<p id="p"></p>
<input id="input" />
<button onclick="fill()">Fill</button>
通过添加立即调用的timeOutAdd
函数而不是延迟,我们可以挂起参数的值,直到setTimeout函数运行。
注意:我也删除了对setTimeout的第二次调用,没有必要,并导致一个错误,其中字符串的第一个字符输出两次。
答案 2 :(得分:0)
这解决了闭包问题,并且简化了输出数据的逻辑。无需将字符串拆分为数组:
function fill() {
var x = document.getElementById('input').value,
p = document.getElementById('p');
for(var i = 0; i < x.length; i++) {
(function(i) {
setTimeout(
function() {
p.innerHTML= x.substr(0, i+1);
},
i*50
)
})(i);
}
}
&#13;
<p id="p"></p>
<input id="input" value="abcde" />
<button onclick="fill()">Fill</button>
&#13;