当满足相等条件时，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 "."

您使用 float 字来计算不透明度，有时浮点计算会出现一点舍入误差

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

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

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