js浮点数精度丢失

今天写了一个淡出的效果,代码如下

function fadeOut(elem, time, callback) {
    if(elem.style.opacity === "") {
        elem.style.opacity = 1;
    }
    if(elem.style.display === "" || elem.style.display === "none") {
        elem.style.display = "block";
    }
    var t = setInterval(function() {
        if(elem.style.opacity > 0) {
            elem.style.opacity = parseFloat(elem.style.opacity) - 0.1;
        }else {
            elem.style.opacity = 0;
            clearInterval(t);
            typeof callback === "function" && callback();
        }
    }, time/10);
}

在电脑端正常执行,但是在手机端,我发现总是卡在即将淡出的界面不动,后来才发现就是这货惹的事parseFloat(elem.style.opacity) - 0.1

一个简单的示例,

0.1 + 0.2 != 0.3 // true

总算找着原因了,浮点数运算时精度丢失导致无法递减到0,所以一直卡在即将淡出又没有淡出的界面。

那么解决办法呢?保留两位小数,即可解决该问题。

elem.style.opacity = parseFloat(elem.style.opacity).toFixed(2) - 0.1;
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注