javascript 间隔满足相等条件不停止

Question

我制作了一个简单的 javascript 函数来更改文本框的不透明度。我使用设置间隔函数将 CSS 不透明度属性增加或减少 0.05，具体取决于文本是可见还是隐藏。起始值为 1。因此递减 0.05 它应该在 20 个间隔内达到 0。我已经设置了不透明度达到0时停止间隔的条件。但它并没有真正停止并继续减少。

let btn = document.querySelector("button[class='opac']")
let box = document.querySelector("div[class='text']")
box.style.opacity = 1

btn.addEventListener("click", () => {
    if (box.style.opacity == 0) {
        let opacity = 0
        let id = setInterval(() => {
            opacity += 0.05
            box.style.opacity = opacity
            if (opacity == 1) {
                clearInterval(id)
            }
        }, 50);
    }
    else if (box.style.opacity == 1) {
        let opacity = 1
        let id = setInterval(() => {
            opacity -= 0.05
            box.style.opacity = opacity
            if (opacity == 0) {
                clearInterval(id)
            }
        }, 50);
    }
})

如果我将条件更改为（不透明度 <= 0），它会起作用，但不透明度的最终值为 -3.19189e-16。我不明白为什么会这样。

Answer 1

运行这个函数在你计算后的不透明度上

(opacity).toFixed(2); // converts 0.4986 to 0.50 , 2 digits after "."

您使用的是浮点数计算不透明度，浮点数计算有时会出现一点舍入误差

如果您只是想改变不透明度，我建议使用 css 动画

@keyframes opacity-changer {
    from {opacity:1;}
    to {opacity:0;}
}

.element {
     animation-name: opacity-changer;
     animation-duration: 1s;
}

javascript 间隔满足相等条件不停止

javascript interval does not stop when the equality condition meets

javascript

css

setinterval