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>

Answer 2

使用splice()代替shift()，并更新逻辑：

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

Answer 3

您必须将.split("")更改为.split(" ")。

您的click-function：

存在问题

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

应该是

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

另外，您可能想要使用此库：

https://github.com/mattboldt/typed.js/

如何将值附加到p然后在JavaScript中从数组中删除它？

3 个答案: