Chrome 提示出现过快

Question

我有一个代码，当我按下按钮时，屏幕会随着div的可见性而变化。 在Edge中，一旦旧屏幕消失，就会加载新屏幕，然后出现提示。 但是，在Chrome中，提示会在新屏幕加载之前甚至在旧屏幕消失之前出现。 我正在做一个图片测验，所以在提示之前显示新页面（带有图片）很重要。 有什么办法可以延迟 Chrome 提示符吗？

不可能先加载整个页面，因为它将直接结束测验，因为它处于循环状态。

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++

我希望在显示测验中的第一张图片后显示提示。

Answer 1

您可以使用setTimeout或设置 Interval 直到元素可见，然后显示提示。 在这里找到几乎相同的答案

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

这里设置了间隔

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

Answer 2

很简单，试试这个

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