除非控制台打开，否则Javascript将不工作

我遇到了一个非常奇怪的问题，我使用一个相当简单的代码在div的子元素中逐渐淡出，代码可以正常工作，但奇怪的是，除非打开开发控制台，否则代码不能正常运行。它只得到不透明度的最后和。Mozilla和Edge也有同样的问题，但chrome在没有打开控制台的情况下工作正常

基本上：console open=渐变fadein，没有控制台，相同的代码只是跳转到不透明度的最终总和

这是我的密码

function FadeIn(item){
    var ChildElement = item.firstElementChild;
    var tooltips = document.getElementsByClassName("sonum");
    var kestvus = tooltips.length;
    var x = 0;
    if(ChildElement.style.display == "none"){
        while (x < kestvus){
            if(tooltips[x].style.display == "block") {
                tooltips[x].style.display = "none";
                tooltips[x].style.opacity = 0;
            }
            x= x+1;
        }
        ChildElement.style.display = "block";
     
        for (var i = 0, a = 0;i <= 10000; i++ ) {
            setTimeout(function(){
            a = a + 0.0001;
            ChildElement.style.opacity = a;
            },50);
        }
    } 
}

功能FadeIn（项目）{
var ChildElement=item.firstElementChild；
var tooltips=document.getElementsByClassName（“sonum”）；
var kestvus=tooltips.length；
var x=0；
if（ChildElement.style.display==“无”）{
而（x对于（var i=0，a=0；i我还没有设法测试您所说的行为，但这可能只是Chrome执行javascript进行调试的一种方式，或者我不知道

无论如何，我要说的是，如果您想在javascript中实现它（尽管您应该进入），您可以用setInterval（）替换for循环。
我已经删除了工具提示逻辑，但您可以重新添加它

这是我如何修复你的

function FadeIn(item){

    var ChildElement = item.firstElementChild;
    if(ChildElement.style.display == "none"){

        ChildElement.style.display = "block";

        let a = 0
        var fadeLoop= setInterval(function(){
            a = a + 0.01;
            ChildElement.style.opacity = a;
            if (a >= 1) clearInterval(fadeLoop)
        },50);
    }
}

我还没有试过你说的行为，但这可能只是Chrome执行javascript进行调试的一种方式，或者我不知道

无论如何，我要说的是，如果您想在javascript中实现它（尽管您应该进入），您可以用setInterval（）替换for循环。
我已经删除了工具提示逻辑，但您可以重新添加它

这是我如何修复你的

function FadeIn(item){

    var ChildElement = item.firstElementChild;
    if(ChildElement.style.display == "none"){

        ChildElement.style.display = "block";

        let a = 0
        var fadeLoop= setInterval(function(){
            a = a + 0.01;
            ChildElement.style.opacity = a;
            if (a >= 1) clearInterval(fadeLoop)
        },50);
    }
}

为了让您简单了解过渡是如何工作的，请查看以下内容：


函数切换类（）{
const ele=document.getElementById（“mydiv”）；
ele.classList.toggle（“显示”）；
ele.classList.toggle（“隐藏”）；
}
#mydiv{
宽度：100px；
高度：100px；
背景颜色：蓝色；
颜色：黄色；
}
#mydiv.hide{
不透明度：0；
过渡：所有2个易于输入输出；
}
#我的节目{
不透明度：1；
过渡：所有2个易于输入输出；
}
切换类
一些文字
为了让您简单了解过渡是如何工作的，请查看以下内容：


函数切换类（）{
const ele=document.getElementById（“mydiv”）；
ele.classList.toggle（“显示”）；
ele.classList.toggle（“隐藏”）；
}
#mydiv{
宽度：100px；
高度：100px；
背景颜色：蓝色；
颜色：黄色；
}
#mydiv.hide{
不透明度：0；
过渡：所有2个易于输入输出；
}
#我的节目{
不透明度：1；
过渡：所有2个易于输入输出；
}
切换类
一些文本
所有这些设置超时都会在50毫秒后触发，它们不会互相等待。奇怪的是，没有这些超时，fadein即使在开发工具打开的情况下也无法工作。我很惊讶它会一直消失。为什么不使用或？尽管使用这样的超时是一种滥用，如果您希望所有超时都按顺序发生，请将时间从
50到
50*i
所有这些设置超时都将在50毫秒后触发，它们不会等待彼此奇怪，但如果没有这些超时，fadein即使与开发工具一起打开也无法工作。我很惊讶它会一直消失为什么不使用或？尽管使用这样的超时是一种滥用，如果您希望所有超时都按顺序发生，请从
50
到
50*i
哦，这就是它们的工作原理。我真的很困惑如何让动画在单击div时运行。非常感谢。：D这是听起来很复杂但实际上很容易实现的事情之一。简单的规则是，只有将类应用于对象时，转换才会生效，因此，您需要定义两个类，例如“before”和“after”或“show”和“hide”，并将转换添加到一个（用于简单的淡入淡出）或两个（切换淡入淡出，反之亦然）哦，这就是它们的工作原理。老实说，我很困惑如何让动画在单击div时运行。非常感谢。：D这是听起来很复杂但实际上很容易实现的事情之一。简单的规则是，转换只在将类应用于对象时生效，因此需要定义两个类例如，d-一个“之前”和“之后”或一个“显示”和“隐藏”，并将转换添加到一个（用于简单的淡入或淡出）或两个（切换淡入然后淡出，反之亦然）