问

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

手机用户2502853373 发布于 2022-11-25 08:03

html

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

1 个回答

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

2022-11-25 08:59 回答

mobiledu2502887897

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签