js的fade in onLoad with for-loop, styles和setInterval不起作用

js fade in onLoad with for-loop, styles, and setInterval not working?

本文关键字：styles setInterval 不起作用 for-loop with fade in onLoad js      更新时间：2023-09-26

为什么在调用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做这件事很感兴趣。

谢谢!救命!

您的fadeIn()函数有几个问题:

。你的for循环条件是i==100，它在第一次迭代时不为真，因此for循环的主体永远不会被执行(i++永远不会发生)。也许您指的是i<=100或i<100(取决于您是希望循环运行101次还是100次)?

B。您的setInterval代码有一个语法错误EDIT:，因为您已经更新了您的问题以删除引号- setInterval期望字符串或函数引用/表达式。所以你需要传递给它一个函数的名字，不带括号和参数，或者一个函数表达式，就像你在下面的代码中看到的匿名函数表达式。在你试图构建传递给它的字符串的方式中。你有这个:

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

但是你需要这个:

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

后者生成一个字符串，根据i，它看起来像"Opacityto(elem,0)"，也就是说，它生成一个有效的JavaScript片段，将调用Opacityto()函数。

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

D。即使解决了以上所有问题，你的基本结构也不会达到你想要的效果。当您调用setInterval()或setTimeout()时，它不会暂停当前代码块的执行。因此，整个for循环将运行并立即创建所有的间隔/超时，然后当100ms结束时，它们将或多或少地同时被触发。如果你的意图是在每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()，然后不传递参数调用它。该函数检查i是否未定义，如果未定义，则将其设置为-1(如果在不传递参数的情况下调用它，则会发生这种情况)。然后，它将i加1，并检查结果是否小于或等于100，如果小于或等于100，则调用Opacityto()，并传递对元素和i的引用。然后在100ms时间内使用setTimeout()调用自身，将当前的i传递过去。因为setTimeout()在if测试中，一旦i变得足够大，函数停止设置超时，整个过程结束。

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

我猜是setInterval里面有一个讨厌的逗号，弄乱了参数列表:

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

你可以试着引用逗号

+ "," +

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

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

请注意，中间的function-making-function是必要的，以避免闭包和for循环之间令人讨厌的交互。

顺便说一句，当你这样做的时候

setInterval(func(), 1000)

你自己调用一次func，然后将的返回值传递给setInterval。因为setInterval接收的是垃圾值而不是回调，所以它不会像你想的那样工作。

相关文章：