您好,匿名用户
随意问技术百科期待您的加入

初学javascript闭包问题,写了段颜色渐变的demo,但是不好使,寻指导

0 投票
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
<script type="text/javascript">
window.onload = function () {
	
		var changeColor = function (node) {
			var i;
			for (i = 0; i < 16; i += 1) {
				var bgc = "#ff" + i.toString(16);
				(function (node,bgc) {
					setTimeout(function (){					
						node.style.backgroundColor = bgc;
					},100);
				})(node,bgc);
			}
		setTimeout(function () {changeColor(node)},200);
		};
		
		changeColor(document.body);
		
		
	}
</script>
	</head>
<body>
	
</body>
</html>

firebug提示node.style.backgroundColor = bgc;中bgc未定义,可是我明明定义了呀

用户头像 提问 2012年 12月1日 @ 阿尔托莉雅 下士 (587 威望)
分享到:

1个回答

0 投票

代码本身我目测应该没问题的,不知道你哪个版本的firebug。
你所说的渐变无效应该是另一个原因造成的。按照你的代码逻辑,for会在一瞬间循环完16次,然后延时100毫秒后,在一个瞬间切换16次颜色——我不觉得肉眼能够看得到这种所谓的瞬间渐变……(你可以试试把16次循环减少点就很明显了,你总是只能看到最后一次切换出的颜色)

你碰到的问题是,setTimeout延时是一种异步的操作,不会阻塞主体代码(你这里就是for循环)的执行,于是你主题代码中的for一瞬间就执行完了,生成的16个延时操作也跟着聚集在一起执行了。

你应该换一个思路,把下一次切换的内容放到setTimeout里去,而不要像你现在这样,在setTimeout的外部用for去实现。

我猜测下你的想法大概写了个,你参考下,应该就是你要的效果。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title></title>
<script type="text/javascript">
window.onload = function () {
        var i=0;
        var changeColor = function (node) {
                node.style.backgroundColor = "#ff" + i.toString(16);
                if(i<16){
                   i++;
                   setTimeout(function () {changeColor(node)},100)
                }else{
                   i=0;
                   setTimeout(function () {changeColor(node)},200)
                }
        };        
        changeColor(document.body);
 }
</script>
        </head>
<body>        
</body>
</html>

PS,回头看了下突然发现其实你不是要研究渐变而是要研究闭包。好吧,那我也坑爹地学着你原来的代码样子闭一个……

<script type="text/javascript">
window.onload = function () {
        var i=0;
        var changeColor = function (node) {
                node.style.backgroundColor = "#ff" + i.toString(16);
                (function(c){
                        return c?function(node){
                                i++;
                               setTimeout(function () {changeColor(node)},100);
                        }:function(node){
                                i=0;
                                setTimeout(function () {changeColor(node)},200);
                        };
                })(i<16)(node);
        };        
        changeColor(document.body);                
 }
</script>
用户头像 回复 2012年 12月1日 @ Garen 上等兵 (269 威望)
提一个问题:

相关问题

0 投票
1 回复 38 阅读
用户头像 提问 2012年 12月1日 @ Rengar 上等兵 (236 威望)
0 投票
1 回复 24 阅读
用户头像 提问 2012年 12月1日 @ Aphrodite 上等兵 (185 威望)
0 投票
1 回复 29 阅读
0 投票
1 回复 36 阅读
用户头像 提问 2012年 12月1日 @ Graves 上等兵 (254 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...