为什么这个全局计数器变量不适用于 setTimeout
Why is this global counter variable not working with setTimeout?
我正在尝试通过交替其他字符的颜色来为某些文本设置动画。我的代码可以以一种方式设置样式,但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);
}
除了乔纳森指出的错别字,你的逻辑似乎有缺陷。 第一次通过该函数,您可以获得初始字符串并构建一些包含各种<span>
标签的 HTML。 下次通过该函数时,您从 DOM 元素获取 innerHTML 并再次开始处理它,就好像它只是您的字符串一样,但这次它是包含所有标签的上一个 HTML - 它不是您开始的字符串。 您需要将原始字符串保存在未修改的位置,以便每次通过函数仅从文本字符串开始,而不是每次都基于以前的格式化 HTML 进行构建。
您有语法错误/拼写错误:
str += title.charAt(i) = "";
// ^
这是一个非法的任务,正如JavaScript控制台会告诉你的那样:
ReferenceError: Invalid left-hand side in assignment
但是,您也可以setTimeout
传递函数引用而不是字符串:
setTimeout(animateText, 500);
这将跳过内部eval
,并允许超时使用在"全局"以外的作用域中定义的函数。
全局变量很好
此行的代码中有语法
str += title.charAt(i) = "";
这不是有效的分配
相关文章:
- html5 drawImage适用于firefox,而不是chrome
- Jquery Ajax POST不工作.适用于GET
- 如何调试遗留的javascript代码(适用于IE,但在Google Chrome中不正常)
- .load()适用于window,而不是ID
- 使用Jquery更改css样式适用于id's、 不在课堂上
- 提交按钮不会;不适用于Chrome或Firefox,但适用于Internet Explorer
- 为什么 javascript 中的“btoa”编码适用于 20 位字符串而不是 20 位整数
- Javascript String to Date适用于Chrome,而不是FF或Safari
- Onchange,向上,向下箭头键适用于FF和Chrome,但在IE中不起作用
- .load() 适用于 IE 和 dreamweaver 预览版,但不能使用 opera 和 chrome
- 找不到适用于 Highcharts 的 JSON 数组语法
- 为什么在jQuery中使用focusout适用于Firefox,而使用addEventListener则不适用;t
- jQuery选择菜单验证器适用于FF和Chrome,但不适用IE
- 单选按钮'onclick'适用于Chrome和Firefox,但不适用IE
- JQuery ScrollTop适用于chrome,但不适用firefox
- window.opener.location.href适用于IE,但不适用Chrome或Safari
- Frame Busting buster不完全适用于IE
- Jquery touch punch适用于Chrome和Firefox,但不适用IE
- 背景更改仅适用于chrome+$.预加载不适用;不起作用
- JavaScript window.location.replace适用于Firefox,但不适用IE或Chrome