setInterval 只响应一次而不是 1000答案

【问题标题】：setInterval response only once instead of 1000setInterval 只响应一次而不是 1000
【发布时间】：2017-12-17 07:26:25
【问题描述】：

我想用 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。有什么问题？

【问题讨论】：

你试过把!= 1改成< 1吗？
你试过更大的延迟吗？
两者都可以，我只尝试偷过一次。
如果没有 ClearInterval，你的代码应该永远重复，在你的 if 之前放置一个调试器来检查
我会尝试parseFloat，以防你得到的值不是数字。

标签： javascript setinterval opacity

【解决方案1】：

代码本身有几个问题：

DRY，你打电话给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);

【讨论】：

你不需要使用 jQuery animate 之类的东西来进行过渡吗？
@bukko Erm，noooooooo... 基本 CSS！
所以，你不需要基本的 CSS：transition: opacity 1s ease-in-out;?
哦，是的，你知道——我没注意到！我的道歉：D
:p 现在不是星期一了XD

【解决方案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);

他们都正确地使用<而不是!=进行浮点类型比较，style.xxx的字符串值并且只调用document.getElementById一次。

你应该考虑排除他们的答案之一。

【讨论】：

【解决方案3】：

试试这个

var t= window.setInterval(function () {

if (parseInt(document.getElementById("goalkeepers").style.opacity) != 1)
{
    document.getElementById("goalkeepers").style.opacity = Number(document.getElementById("goalkeepers").style.opacity) + 0.001;
}
else
{
    clearInterval(t);   
}
}, 1);

你的不透明度没有增加，所以使用 Number() 并且一旦不透明度达到 1，你就已经清除了间隔，否则它会继续调用可能会在一段时间后减慢你的浏览器。

【讨论】：

0.001 + 0.001 + ... 一千次是1.0000000000000007（浮点数），而不是1。
是的...eval(new Array(1001).join("+0.001")) 给出了上述结果，如果您不相信eval，请尝试for( i=0; i!=1; i+=0.001); 并观看您的浏览器烧毁。
@Niet the Dark Absol。我要问的是您是否尝试过我在答案中放置的相同代码？
我不需要。我知道它永远不会结束。虽然效果可能不可见，但请尝试将 alert("Done!") 添加到 else 块。然后等待它出现。
@Niet the Dark Absol 请不要做任何假设。我试过那个代码。它有效。