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属性在Strings中表示，不能使用+=.

等数学运算符

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

Answer 2

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

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

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

您需要做的就是将 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);

}

setInterval 只执行一次

setInterval executes only once

javascript

anonymous-function

setinterval