Question

我有一个名为fadeIn的函数，我希望在满足条件之前将其返回。

我尝试在else行中添加警告以及clearInterval(myVar)，但它只是保持警报。

CSS：

* {
    background-color: black;
    padding: 0;
    margin: 0;
    height: 100%;
}
#title {
    background-color: white;
    height: 50px;
}
audio {
    display: none;
}
#audio-icon {
    width: 50px;
    background-color: white;
}
#focus {
    background-color: black;
    margin: auto;
    width: 100%;
    height: 700px;
    border: 5px, solid, grey;
    border-style: inset;
    border-radius: 10px;
}
#text-box {
    background-color: black;
    width: 100%;
    height: 200px;
    margin-top: 500px;
    float: left;
    border: 5px, solid, grey;
    border-style: inset;
    border-radius: 10px;
}
#command-line {
    background-color: black;
    width: 100%;
    height: 50px;
    margin-top: 150px;
    float: left;
    border: 5px, solid, grey;
    border-style: inset;
    border-radius: 10px;
}
#element {
    opacity: 0.1;
}

HTML：

<audio id="background-audio" controls autoplay="autoplay" loop>
    <source src="Darkness.mp3" type="audio/mpeg">
</audio>
<div id="title">
    <img id="audio-icon" src="unmute.png" onclick="mute()">
    <img id="element" src="123.png">
</div>
<div id="focus">
    <div id="text-box">
        <div id="command-line"></div>
    </div>
</div>

JavaScript的：

function fadeIn() {
    var myVar = setInterval(fadeIn, 500);
    var element = document.getElementById('element');


    if (element.style.opacity < 1) {
        element.style.opacity -= '-0.1';
    } else {
        clearInterval(myVar);

    }
}

function mute() {
    var audio = document.getElementById('background-audio');
    var img = document.getElementById('audio-icon');

    if (audio.muted) {
        audio.muted = false;
        img.src = 'unmute.png';
    } else {
        audio.muted = true;
        img.src = 'mute.png';
    }
}


document.onload = fadeIn();

更新：

我把变量放在函数之外，所有突然间我的代码似乎都能正常工作。不知道这是怎么可能的，因为我已经尝试过了。我的代码根本不运行，alert会保持警报。无论如何，感谢所有的帮助。这是我的第一个问题，除了一些错别字以及我列出我的代码的方式之外，我真的不知道为什么我会被投票，所以欢迎任何反馈意见！这是我目前的工作代码：

<script>
            var myVar = setInterval(fadeIn, 500);
            var element = document.getElementById('element');

            function fadeIn() {
                console.log(element.style.opacity)
                if (element.style.opacity < 1) {
                element.style.opacity -= '-0.1';
                } else {
                clearInterval(myVar);
                }
            }

            function mute() {
            var audio = document.getElementById('background-audio');
            var img = document.getElementById('audio-icon');

            if (audio.muted) {
                audio.muted = false;
                img.src = 'unmute.png';
            } else {
                audio.muted = true;
                img.src = 'mute.png';
            }
        }


        document.onload = fadeIn();
        </script>

Answer 1

你调用fadIn func onload（没关系）然后你创建一个队列来每隔半秒执行一次该函数，在每次迭代中你创建另一个队列来每半秒执行一次函数....迟早你要用这个来杀死浏览器。

您正在寻找的可能更像是：

function fadeIn() {
    if (opacity < 1) {
        opacity += 0.1;
        setTimeout(fadeIn, 500);
    }
}

document.onLoad = fadeIn();

如果不是为了学习JavaScript，你应该使用CSS过渡而不是JavaScript来做fadeIn / fadeOut之类的事情。

Answer 2

请参阅代码段.it将使用1停止覆盖率。请访问console.log

   var myVar;
 var element = document.getElementById('element');

function fadeIn() {

              console.log(element.style.opacity)
                if (element.style.opacity < 1) {element.style.opacity -= -0.1;
                }
                else {
                    clearInterval(myVar);

                    }
            }

            function mute(){
                var audio = document.getElementById('background-audio');
                var img = document.getElementById('audio-icon');

                if (audio.muted) {
                    audio.muted = false;
                    img.src = 'unmute.png';
                }

                else {
                    audio.muted = true;
                    img.src = 'mute.png';
                }
            }


        window.onload =function(){
           myVar = setInterval(fadeIn, 500);
          }

* {
                background-color: black;
                padding: 0;
                margin: 0;
                height: 100%;
            }

            #title {
                background-color: white;
                height: 50px;
            }

            audio {
                display: none;
            }

            #audio-icon {
                width: 50px;
                background-color: white;
            }

            #focus {
                background-color: black;
                margin: auto;
                width: 100%;
                height: 700px;
                border: 5px, solid, grey;
                border-style: inset;
                border-radius: 10px;
            }

            #text-box {
                background-color: black;
                width: 100%;
                height: 200px;
                margin-top: 500px;
                float: left;
                border: 5px, solid, grey;
                border-style: inset;
                border-radius: 10px;    
            }

            #command-line {
                background-color: black;
                width: 100%;
                height: 50px;
                margin-top: 150px;
                float: left;
                border: 5px, solid, grey;  
                border-style: inset;
                border-radius: 10px;
            }

            #element {
                opacity: 0.1;
            }

<audio id="background-audio" controls autoplay="autoplay" loop>
        <source src="Darkness.mp3" type="audio/mpeg">
        </audio>


        <div id="title">
            <img id="audio-icon" src="unmute.png" onclick="mute()">
            <img id="element" src="123.png">
        </div>

        <div id="focus">
            <div id="text-box">
                <div id="command-line"></div>
            </div>

        </div>

var myVar ;
var element = document.getElementById('element');
function fadeIn() {
                
               console.log(element.style.opacity)
                if (element.style.opacity < 1) {  
                  element.style.opacity -= -0.1;
                }
                else {
                    clearInterval(myVar);

                    }
            }
window.onload= function (){
  myVar = setInterval(fadeIn, 100);
  
  
  }

<p id="element">hi</p>

Answer 3

这里的问题是，setInterval的调用与if条款无关，并且您发送了未观察到的时间间隔，在fadeIn中您无权访问的时间间隔功能块。

在这种情况下，你也可以使用setTimeout代替它，因为它只是异步评估它的第一个参数，因为你不能以你处理它们的方式访问这些间隔。

注意：您的淡入条件是错误的，因为您在降低元素不透明度时其不透明度仅大于1 ...我只是将1更改为{{} 1}}。

现在，如果您要停止淡入操作，可以使用var element, lastFadeInTimeout; element = document.getElementById('element'); function fadeIn() { // The element is not totally // transparent yet if (element.style.opacity > 0) { element.style.opacity -= 0.1; // Let's wait 500ms to fade the element // again, only once lastFadeInTimeout = setTimeout(fadeIn, 500); } }拨打clearTimeout，其中lastFadeInTimeout是淡入操作创建的上次超时的标识符

lastFadeInTimeout

如何删除函数上的setInterval？

3 个答案: