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

【问题标题】：Why is this global counter variable not working with setTimeout?为什么这个全局计数器变量不能与 setTimeout 一起使用？
【发布时间】：2012-04-09 05:39:13
【问题描述】：

我正在尝试通过交替每个其他字符的颜色来为某些文本设置动画。我的代码正在以一种方式对其进行样式设置，但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);

}

【问题讨论】：

啊，谢谢大家——修复错字并传递 setTimeout 函数引用正在工作。但是，动画使浏览器崩溃——似乎第一行 (var str = "";) 在第一次迭代后没有进行评估......相反，输出类似于 += 操作。有什么想法吗？

标签： javascript animation global-variables settimeout counter

【解决方案1】：

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

【讨论】：

太好了，谢谢你——这是一个简单的解决方案，现在它可以工作了。还要感谢@JonathanLonowski 的帮助。

【解决方案2】：

你有一个语法错误/错字：

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

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

ReferenceError: Invalid left-hand side in assignment

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

setTimeout(animateText, 500);

这将跳过内部eval，并允许超时使用在“全局”以外的范围内定义的函数。

【讨论】：

【解决方案3】：

全局变量就好了

这行代码中有一个语法

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

这不是一个有效的分配

【讨论】：