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()功能遇到了几个问题：

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

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

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

但你需要这个：

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

~~后者产生一个字符串，取决于i，看起来像"Opacityto(elem,0)"，即它产生一个有效的JavaScript片段，它将调用Opacityto()功能。~~

℃。您可能需要setTimeout()而不是setInterval()，因为setInterval()将每100毫秒永久地运行您的Opacityto()函数，而setTimeout()将会运行在{100}延迟之后，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并检查结果是否小于或等于100，如果是，则调用Opacityto()传递对元素的引用和i。然后，它使用setTimeout()在100ms时间内调用本身，并传递当前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接收垃圾值而不是回调，所以它不会按你的意愿工作。

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

2 个答案: