No idea where to put settimeout

问题

So I have very limited knowledge of javascript, so I apologize in advance for my stupidity.

I am trying to make it so that these alerts play 16 seconds after the website is initially opened. In the background, there is a video playing and it seems like the video has an effect on the website, but in reality, it's just played in a particular way. How can I get it so that the three alerts play 16 seconds from the opening of the website? Where do you put the settimeout, or where in the code do you place the function's time duration?

Once again, I truly do not know javascript, so please where do I put setTimeout in this code?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<style>

#video {
    margin-left:-10px;
    margin-top:-10px;
}

</style>
</head>
<script>

function myText() {
    var txt;
    var person = prompt("What's your name?", "");
    if (person == null || person == "") {
        txt = "User cancelled the prompt.";
    } else {
        txt = "Hello " + person + "! How are you today?";
    }
    document.getElementById("demo").innerHTML = txt;
}



function playAlert(msg, wav) {

    return new Promise(function(resolve) {
        var audio = new Audio(wav);
        audio.addEventListener('canplay', function(e) {
            audio.play();
            alert(msg);
            resolve();

        });
    });
}
playAlert("1", 'Images/thankyou.wav')
.then(function() {
    return playAlert("2", 'Images/sorry.wav');
})
.then(function() {
    return myText("3", 'Images/mynameiseve.wav');
});



</script>
<body>
<video autoplay="autoplay" preload="metadata" id="video" src="images/secondnew.mp4" width="1300px" height="auto" style="position:absolute; z-index:-1;" >
        Video not supported.
         </video>
</body>
</html>

回答1:

You can use it before the function you declared : playAlert()

So :

let timeInMs = 16000; // set the time in Milisecond here setTimeout(playAlert("1", 'Images/thankyou.wav'), timeInMs);

回答2:

Use the "ready" event of the document. --- This event fires after the DOM has loaded.

function playAllAlerts(){
  // do your things
}
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(playAllAlerts,16000)); // note playAllAlerts, not playAllAlerts()
});

    function playAllAlerts(){
      console.log('Thing 1');
      console.log('Thing 2');
    }
    document.addEventListener('DOMContentLoaded', function() {
      setTimeout(playAllAlerts,1000); // note playAllAlerts, not playAllAlerts()
    });

<div></div>

来源：https://stackoverflow.com/questions/49582133/no-idea-where-to-put-settimeout

标签

javascript

function

time

settimeout

alert