js 在 onLoad 中淡入淡出，for 循环、样式和 setInterval 不起作用？

Question

为什么当调用 fadeIn() onLoad 时浏览器会立即执行循环。换句话说，setInterval 或 Opacityto() 存在问题。

function Opacityto(elem,v){
    elem.style.opacity = v/100;
    elem.style.MozOpacity =  v/100;
    elem.style.KhtmlOpacity =  v/100;
    elem.style.filter=" alpha(opacity ="+v+")";}

function fadeIn(){
elem=document.getElementById('nav');
for (i=0;i==100;i++){
    setInterval(Opacityto(elem,i),100);}
}

我想有人会告诉我这可以用 jQuery 最简单地完成，但我对用 javascript 感兴趣。

谢谢！救命！

Answer 1

您的 fadeIn() 函数存在几个问题：

A. 您的 for 循环条件是 i==100，这在第一次迭代中不成立，因此for 循环体永远不会被执行（i++ 永远不会发生）。也许您的意思是 i<=100 或 i<100 （取决于您希望循环运行 101 次还是 100 次）？

B. 您的 setInterval 代码存在语法错误编辑：，因为您已更新问题以删除引号 - setInterval 需要一个字符串或函数引用/表达式。因此，您需要向其传递一个不带括号和参数的函数名称，或者一个函数表达式，例如您可以在下面的代码中看到的匿名函数表达式。 以您尝试构建传递给它的字符串的方式。你已经有了这个：，

"Opacityto("+elem,i+")"

但你需要这个：

"Opacityto(elem," + i + ")"

后者生成一个字符串，根据i，看起来像“Opacityto(elem,0)”< /code>，即，它生成一段有效的 JavaScript 代码，它将调用 Opacityto() 函数。

C. 您可能需要 setTimeout() 而不是setInterval()，因为setInterval() 将每 100 毫秒运行一次 Opacityto() 函数永远，而 setTimeout() 将运行 Opacityto() 在 100 毫秒延迟后恰好执行一次。鉴于您在循环中调用它，我确定您真的不想调用 setInterval() 100 次来导致您的函数 Opacityto() 运行每 100 毫秒 100 次永远。

D. 即使解决了上述所有问题，您的基本结构也不会达到您想要的效果。当您调用 setInterval() 或 setTimeout() 时，它不会暂停当前代码块的执行。因此，整个 for 循环将运行并立即创建所有间隔/超时，然后当 100 毫秒结束时，它们或多或少都会立即触发。如果您的目的是逐渐改变不透明度，每次更改每 100 毫秒发生一次，那么您需要以下代码（或其一些变体）：

function fadeIn(i){
    // if called with no i parameter value initialise i
    if (typeof i === "undefined") {
       i = -1;
    }

    if (++i <= 100) {
       Opacityto(document.getElementById('nav'), i);
       setTimeout(function() { fadeIn(i); }, 100);
    }
}

// kick it off:
fadeIn();

上面的代码所做的是定义 fadeIn() ，然后调用它，传递 no范围。该函数检查 i 是否未定义，如果是，则将其设置为 -1（如果您在不传递参数的情况下调用它，就会发生这种情况）。然后它递增 i 并检查结果是否小于或等于 100，如果是，则调用 Opacityto() 传递对元素和 i 的引用代码>.然后它使用 setTimeout() 在 100 毫秒内调用自身，传递当前的i。因为 setTimeout() 位于 if 测试中，一旦 i 变得足够大，函数就会停止设置超时，整个过程就会结束。

还有其他几种方法可以实现此目的，但这只是我开始输入时发生的第一种方法......

Answer 2

我的猜测是 setInterval 中有一个令人讨厌的逗号，弄乱了参数列表：

"Opacityto("+elem,i+")"
                ^^^
                here

您可以尝试引用逗号，

+ "," + 

但 eval 是邪恶的，所以不要这样做。好的方法是传递一个真正的回调函数：

function make_opacity_setter(elem, i){
    return function(){
        OpacityTo(elem, i);
    };
}

...

setTimeout( make_opacity_setter(elem, i), 1000);

请注意，需要中间函数生成函数来避免闭包和 for 循环之间令人讨厌的交互。

---

顺便说一句，当您这样做时，

setInterval(func(), 1000)

您自己调用一次 func ，然后将其返回值传递给 setInterval 。由于 setInterval 收到的是垃圾值而不是回调，因此它不会按您想要的方式工作。