javascript - 如何将一个值附加到 p，然后从 JavaScript 中的数组中删除它？

Question

代码如下:

var bgChange = "Changing background color".split("");

function typeText (sourCe, tarGet) {
    var i = 0;
    function show () {
        if (i < sourCe.length) {
            $(tarGet).append(sourCe[i]);
            sourCe.splice(i, 1);
            i = i + 1;
        }
    }
    var tiMer = setInterval(show, 30);
}

$("#button").click(function(){
    typeText(bgChange, "p");
)};

这是我想要实现的。

我想通过“split(”)”方法将字符串“Changing background color”变成一个数组，这个数组中的值将被附加到一个HTML段落标记中，间隔为30 mili-秒，这将创建一个打字动画。

另外，我希望从数组中删除已经附加的数组值，这样如果我停止并恢复打字动画，我希望动画从它停止的地方恢复，这是我的意图用于将“sourCe.splice(i, 1)”放入函数中。

但是，通过单击“#button”运行函数“typeText”只会附加以下字符:“Cagn akrudclr”。

我完全不知道是什么导致了这个问题。

Answer 1

当您从数组中删除元素时，您只需要从数组中读取第一个字符并将其附加到 paragraph 元素。

此外，关闭事件处理程序时存在语法错误。

var bgChange = "Changing background color".split("");

function typeText (sourCe, tarGet) {
    function show () {
        if (sourCe.length) {
            $(tarGet).append(sourCe[0]);
            sourCe.splice(0, 1);
        }
    }
    var tiMer = setInterval(show, 30);
}

$("#button").click(function(){
    typeText(bgChange, "p");
});  //Error here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">button</button>
<p></p>