为什么这个全局计数器变量不适用于 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 进行构建。

Answer 2

您有语法错误/拼写错误：

str += title.charAt(i) = "";
//                     ^

这是一个非法的任务，正如JavaScript控制台会告诉你的那样：

ReferenceError: Invalid left-hand side in assignment

但是，您也可以setTimeout传递函数引用而不是字符串：

setTimeout(animateText, 500);

这将跳过内部eval，并允许超时使用在"全局"以外的作用域中定义的函数。

Answer 3

全局变量很好

此行的代码中有语法

str += title.charAt(i) = "";

这不是有效的分配