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;
如果您觉得本文对您有用,欢迎捐赠或留言~
- 本博客所有文章除特别声明外,均可转载和分享,转载请注明出处!
- 本文地址:https://www.leevii.com/?p=304