javascript интервал не останавливается, когда выполняется условие равенства

Question

Я сделал простую функцию javascript, чтобы изменить непрозрачность текстового поля. Я увеличиваю или уменьшаю свойство непрозрачности CSS на 0,05, используя функцию заданного интервала, в зависимости от того, должен ли текст быть видимым или скрытым. Начальное значение равно 1. Таким образом, при уменьшении 0,05 оно должно достигать 0 через 20 интервалов. Я установил условие, чтобы остановить интервал, когда непрозрачность достигает 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. Я не понимаю, почему это так. </p>

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;
}