使用SetInterval的函数的setTimeout延迟

Question

So I have an animation that works - showAlert that is called in body onload . Now I want to delay the animation for some time (1 second in the code snippet) using setTimeout .

I call delayShow() in body onload .

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);
}

The code does not work. If I change setTimeout to setTimeout(function(){alert("hello")}, 1000) , it will work.

Anything I could do to set the delay?

Answer 1

Not sure why you have the lines

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

This is not the way to use events. Either do further research on this topic or ask a specific new question about events in the context you want to use them.

The two lines above produce errors. Finding the developer tools option within your browser will allow you to switch on the console which will show you the errors.

The following code works although the delay of 5 milliseconds in setInterval is too fast to be noticeable as a fade in.

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);
}