Chrome 提示出现过快

Question

I have a code that when I press a button, the screen changes with div visibility. In Edge , once the old screen disappears, the new screen loads and then a prompt appears. However, in Chrome , the prompt appears before the new screen is loaded and even before the old screen has disappeared. I am making a picture quiz so it is important that the new page (with the picture) displays before the prompt. Is there any way to delay the Chrome prompt?

It is not possible to load the entire page first because it will directly end the quiz as it is in a loop.

function classic() {
    document.getElementById('explain').style.display = "none";
    document.getElementById('game').style.display = "block";
    document.body.style.background = "grey";
    var quiz = [
        [1, 'Which country is this flag from?', 'netherlands'],
        [2, 'Which country is this flag from?', 'belgium'],
        [3, 'Which country is this flag from?', 'france'],
        [4, 'Which country is this flag from?', 'germany'],
        [5, 'Which country is this flag from?', 'united kingdom'],
        [6, 'Which country is this flag from?', 'italy'],
        [7, 'Which country is this flag from?', 'russia'],
        [8, 'Which country is this flag from?', 'norway'],
        [9, 'Which country is this flag from?', 'brazil'],
        [10, 'Which country is this flag from?', 'morocco'],
        [11, 'Which country is this flag from?', 'united states'],
        [12, 'Which country is this flag from?', 'kazakhstan'],
        [13, 'Which country is this flag from?', 'japan'],
        [14, 'Which country is this flag from?', 'argentina'],
        [15, 'Which country is this flag from?', 'portugal'],
        [16, 'Which country is this flag from?', 'luxembourg'],
        [17, 'Which country is this flag from?', 'mexico'],
        [18, 'Which country is this flag from?', 'china'],
        [19, 'Which country is this flag from?', 'egypt'],
        [20, 'Which country is this flag from?', 'nigeria']
    ];

    var nummer = 0;
    var answer;
    var response;
    var score = 0;
    for (var i = 0; i < quiz.length; i += 1) {
        nummer++
        document.getElementById('flag').src = "flags/flag" + nummer + ".png";
        answer = prompt(quiz[i][1]);

        if (answer === null) {
            window.alert("You cancelled the prompt. Please reload the page to play again.")
        }
        response = answer.toLowerCase();
        if (response === quiz[i][2]) {
            score++

I want the prompt to display after the first picture in the quiz is displayed.

Answer 1

You can use a setTimeout or set Interval until element is visible then display the prompt. Almost same answer found here

setTimeout(function(){ // Do your thing here e.g show promt 
}, 3000); // It will show promt after 3 seconds

And here is set Interval

var visibility= setInterval(function() {
   if ($('#element').length) {
      //Stop the interval when it is visible
      clearInterval(visibility);
   }
}, 300);

Answer 2

Its quite simple, Just try this,

document.getElementById('flag').src = "flags/flag" + nummer + ".png";
document.getElementById('flag').onload = function() 
{ 
  answer = prompt(quiz[i][1]);
 }