数组中的字符串不会在HTML中显示为字符串

时间:2015-05-21 14:16:21

标签: javascript arrays string object

首先,我的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;,什么都行不通。我完全失去了。真的很想在这里得到一些帮助。谢谢!

3 个答案:

答案 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)

这解决了闭包问题,并且简化了输出数据的逻辑。无需将字符串拆分为数组:

&#13;
&#13;
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;
&#13;
&#13;