使用SetInterval的函數的setTimeout延遲

Question

所以我有一個動畫，可以在body onload showAlert 。 現在，我想使用setTimeout將動畫延遲一段時間（代碼段中為1秒）。

我在body onload調用delayShow() 。

function delayShow() {
    var runOnce = setTimeout(showAlert, 1000);
}

function showAlert() {
    var e = window.event;
    var element = e.target;

    var alert = document.getElementById("hide-navigation-instruction");

    var opacity = 0.0;

    function fadeIn() {
        opacity += 0.03;

        alert.style.opacity = opacity;

        if (opacity >= 1){
            clearInterval(id);
        }
    }

    var id = setInterval(fadeIn, 5);
}

該代碼不起作用。 如果我將setTimeout更改為setTimeout(function(){alert("hello")}, 1000) ，它將正常工作。

我可以設置延遲嗎？

Answer 1

不確定為什么要排隊

var e = window.event;
var element = e.target;

這不是使用事件的方式。 可以對此主題進行進一步研究，或者在您要使用事件的上下文中詢問有關事件的特定新問題。

上面的兩行會產生錯誤。 在瀏覽器中找到開發人員工具選項將使您能夠打開控制台，該控制台將向您顯示錯誤。

盡管setInterval中的5毫秒的延遲太快而無法淡入，但以下代碼仍然有效。

function delayShow() {
    /*added line below to ensure hide-navigation-instruction is hidden
      at start. You may have already set this within css style */
    document.getElementById("hide-navigation-instruction").style.opacity=0;
    var runOnce = setTimeout(showAlert, 1000);

}

function showAlert() {

    var alert = document.getElementById("hide-navigation-instruction");

    var opacity = 0.0;

    function fadeIn() {
        opacity += 0.03;

        alert.style.opacity = opacity;

        if (opacity >= 1){
            clearInterval(id);
        }
    }

    var id = setInterval(fadeIn, 5);
}