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

发布于 2022-08-24 01:11:11 字数 737 浏览 23 评论 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未定义，可是我明明定义了呀

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云朵有点甜 2022-08-31 01:11:11

代码本身我目测应该没问题的，不知道你哪个版本的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>

回复收藏 0

~没有更多了~