javascript - 为什么这个全局计数器变量不能与 setTimeout 一起使用？

Question

我正在尝试通过交替每个其他字符的颜色来为某些文本设置动画。我的代码可以以一种方式设置样式，但是 setTimeout 不会再次调用它来更改文本颜色。

问题似乎是我使用全局变量作为计数器，这可能是我忽略的一个简单问题。

有什么想法吗？这是我的 JavaScript 代码:

var num = 0;
function animateText(){
    var str = "";
    var title = document.getElementById("title").innerHTML;

    for(var i = 0; i < title.length; i++){
        if(num % 2 == 0){
            if(i % 2 == 0){
                str += '<span style = "color: silver;">' + title.charAt(i) + '</span>';
            } else {
                str += title.charAt(i) + "";
            }
        } else {
            if(i % 2 != 0) {
                str += '<span style = "color: silver;">' + title.charAt(i) + '</span>';
            } else {
                str += title.charAt(i) = "";
            }
        }
    }

    document.getElementById("title").innerHTML = str;
    num++;

    if(num == 10) 
        num = 0;

    setTimeout("animateText()", 500);

}

Answer 1

除了乔纳森指出的拼写错误之外，你的逻辑似乎有缺陷。第一次使用该函数时，您将获得初始字符串并使用各种 <span> 构建一些 HTML里面有标签。下次通过该函数时，您从 DOM 元素获取innerHTML，并开始再次处理它，就好像它只是您的字符串一样，但这次它是之前的 HTML，其中包含所有标签 - 它不是您开始时使用的字符串。您需要将原始字符串保存在未修改的地方，以便每次通过该函数时都可以仅从文本字符串开始，而不是每次都在以前格式化的 HTML 上构建。