js浮点数精度丢失

该文章由 leevare 发布于 ,归类于 Javascript

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

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;

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒