setInterval响应只有一次而不是1000

Question

我想用setInterval更改表的不透明度：

    window.setInterval(function () {
        if (document.getElementById("goalkeepers").style.opacity != 1)
            document.getElementById("goalkeepers").style.opacity = document.getElementById("goalkeepers").style.opacity + 0.001;
    }, 1);

当我运行此代码时，它只执行一次，表的不透明度仅为0.001。问题是什么？

Answer 1

代码本身有几个问题：

• 干，你打电话给getElementById得到相同的元素很多。
• 你假设0.001 + 0.001 + 0.001 + ...一千次将加起来正好1.这在计算机中是不正确的，因为浮点数的工作原理。你应该使用< 1而不是!= 1
• 检索样式始终是一个字符串。因此，结果是试图成为0.0010.001，即。级联。
• 你正在使用1ms的间隔。间隔通常不应小于约20。

尝试：

var tbl = document.getElementById('goalkeepers');
tbl.style.opacity = 0;
tbl.style.transition = "opacity 1s linear";
setTimeout(function() {
    // delay the actual opacity setting so it will be transitioned
    tbl.style.opacity = 1;
},10);

Answer 2

当我制作一个fiddle时，这些家伙打败了我，但无论如何我都会发帖。

var gk = document.getElementById("goalkeepers"),
    animation = window.setInterval(function () {
        if (gk.style.opacity < 1) {
            gk.style.opacity = Number(gk.style.opacity) + 0.001;
        }
        else {
            clearInterval(animation);
        }
    }, 1);

它们都是正确的使用qazxsw poi而不是qazxsw poi进行浮点型比较，<的字符串值，只调用!=一次。

你应该考虑除了他们的一个答案。

Answer 3

试试这个

style.xxx

你的不透明度没有递增，所以使用Number（）你也清除了一旦不透明度达到1时的间隔，否则它将继续调用可能会在一段时间后减慢浏览器的速度。