setInterval仅执行一次

Question

我在使用setInterval函数时遇到麻烦。 它只执行一次。

function show(el){
    el.style.opacity = 0;
    el.style.display = "block";
    showingInterval = window.setInterval(function() {
            el.style.opacity += 0.001;
            if(el.style.opacity == 1) {
                alert("done");
                clearInterval(showingInterval);
            }
        }, 1);
}

show(el)函数不是问题。 它将不透明度更改为0并显示为"block"就好了。 间隔函数运行一次，将元素的不透明度更改为0.0001 。 它保持在该状态，但是不再更改。

谢谢您的帮助！

Answer 1

第一个问题， Element.node.style不可靠。 要检查当前状态和值，请始终使用window.getComputedStyle( Node ) 。

第二个问题，css属性用字符串表示，您不能使用+=类的数学运算符进行操作。

el.style.opacity = parseFloat( getComputedStyle( el ).opacity ) + 0.001;

Answer 2

这里的问题是+=在您的情况下不是数学求和运算，而是字符串连接。 发生这种情况是因为，如果至少一个操作数是字符串类型，则一元+运算符会执行字符串连接。 DOMElement.style属性的值始终是字符串，因此在您的情况下，增加的不透明度值如下所示：

"0" + 0.001 // => "00.001"

当您将此值用作新的opacity ，浏览器由于格式无效，因此将其再次设置为“ 0”。

您所需el.style.opacity就是将el.style.opacity为Number类型。 例如，使用Number功能：

el.style.opacity = Number(el.style.opacity) + 0.01;

演示： http ： //jsfiddle.net/gvg31gd1/

Answer 3

这是只需要声明一个变量的解决方案

您的代码不是icreamenet不透明度值，这就是为什么我不工作的原因

var opacity = 0;
function show(el){
el.style.opacity = 0;
el.style.display = "block";
showingInterval = window.setInterval(function() {
       opacity = opacity + 0.001;
        el.style.opacity = opacity;
        document.write(opacity)
        if(el.style.opacity == 1) {
            alert("done");
            clearInterval(showingInterval);
        }
    }, 1);

}