如何让打字动画效果在最后一个单词处停止循环？

问题 #

尝试让打字动画在最后一个单词“three”处停止循环，但动画始终持续循环，调试后未解决问题。原代码如下：

/*  
Type animation
*/

const words = ["one", "two" , "three"];
let i = 0;
let timer;

function typingEffect() {
    let word = words[i].split("");
    var loopTyping = function() {
        if (word.length > 0) {
            document.getElementById('word').innerHTML += word.shift();
        } else {
            deletingEffect();
            return false;
        };
        timer = setTimeout(loopTyping, 300);
    };
    loopTyping();
};

function deletingEffect() {
    let word = words[i].split("");
    var loopDeleting = function() {
        if (word.length > 0) {
            word.pop();
            document.getElementById('word').innerHTML = word.join("");
        } else {
            if (words.length > (i + 1)) {
                i++;
            } else {
                i = 0;
            };
            typingEffect();
            return false;
        };
        timer = setTimeout(loopDeleting, 10);
    };
    loopDeleting();
};

typingEffect();

解决方案 #

问题出在deletingEffect函数的收尾逻辑：当处理到最后一个单词时，代码会把索引i重置为0并再次调用typingEffect，导致循环无法停止。只需修改这部分逻辑，当i到达最后一个单词的索引时，不再触发下一轮动画即可。

场景1：最后一个单词保留显示，打完后直接停止 #

修改后的代码：

/*  
Type animation
*/

const words = ["one", "two" , "three"];
let i = 0;
let timer;

function typingEffect() {
    let word = words[i].split("");
    var loopTyping = function() {
        if (word.length > 0) {
            document.getElementById('word').innerHTML += word.shift();
        } else {
            // 仅当前不是最后一个单词时才触发删除效果
            if (i < words.length - 1) {
                deletingEffect();
            }
            return false;
        };
        timer = setTimeout(loopTyping, 300);
    };
    loopTyping();
};

function deletingEffect() {
    let word = words[i].split("");
    var loopDeleting = function() {
        if (word.length > 0) {
            word.pop();
            document.getElementById('word').innerHTML = word.join("");
        } else {
            i++;
            typingEffect();
            return false;
        };
        timer = setTimeout(loopDeleting, 10);
    };
    loopDeleting();
};

typingEffect();

场景2：最后一个单词打完后先删除，再停止 #

如果需要最后一个单词删除完毕后再停止循环，可使用以下代码：

/*  
Type animation - 最后一个单词删除后停止
*/

const words = ["one", "two" , "three"];
let i = 0;
let timer;

function typingEffect() {
    let word = words[i].split("");
    var loopTyping = function() {
        if (word.length > 0) {
            document.getElementById('word').innerHTML += word.shift();
        } else {
            deletingEffect();
            return false;
        };
        timer = setTimeout(loopTyping, 300);
    };
    loopTyping();
};

function deletingEffect() {
    let word = words[i].split("");
    var loopDeleting = function() {
        if (word.length > 0) {
            word.pop();
            document.getElementById('word').innerHTML = word.join("");
        } else {
            if (words.length > (i + 1)) {
                i++;
                typingEffect();
            }
            // 最后一个单词删除后，不触发下一轮动画，直接停止
            return false;
        };
        timer = setTimeout(loopDeleting, 10);
    };
    loopDeleting();
};

typingEffect();

内容的提问来源于stack exchange，提问作者HELLBORN