为什么在Chrome之前确认()函数加载?

时间:2016-01-30 19:29:59

标签: javascript google-chrome

我想知道为什么在Chrome中,这一行:

var quer = confirm("Deseja esta poltrona?");

在前一行之前加载:

imagens[i].src = "img/poltrona_selecionada.jpg";

在Firefox上,te功能在序列中完美运行。

这是我的功能:

function selecionarPoltrona() {
    var imagens = document.getElementsByTagName("img");
    for (var i=0; i<poltronas.length; i++) {
        if (poltronas[i]) {
            imagens[i].src = "img/poltrona_selecionada.jpg";
            var quer = confirm("Deseja esta poltrona?");

            if (quer) {
                break;
            } else {
                imagens[i].src = "img/poltrona_disponivel.jpg";
            }
        }
    }
}

谢谢

1 个答案:

答案 0 :(得分:2)

欢迎使用Image对象和<img>元素:它不是同步的。当您告诉图像它的来源是什么时,其余代码将继续运行。在看到图像之前,它不会等待图像绑定成功,要​​查找的图像URL,要传输的数据,要解码的字节。这一切都在代码的其余部分运行时发生。但是,确认(和警报,提示,以及所有那些可怕的功能)不会:他们阻止线程。所以这发生了:

  1. 您设置了图片.src属性,浏览器会将其安排为线程外处理。您的代码仍在继续
  2. confirm被触发,一切都停止了。在确认处理之前,您的标签中不会发生任何事情。
  3. 点击确认。 Javascript再次运行,浏览器的图像源绑定再次运行。
  4. 经过X段时间后,您的图像将完成下载,解析和最终渲染。
  5. 如果您希望某些代码在之后运行图像完成所有工作,请执行以下操作:

    ...
    img.onload = function() {
      // the code you need to have run after the image finishes loading.
    }
    img.onerror = function() {
      // whatever we need to do if the image cannot load.
    }
    img.src = "..." // trigger the image loading attempt
    

    或者,使用现代而不是1998 JS:

    ...
    img.addEventListener("load", function(evt) {
      // the code you need to have run after the image finishes loading.
    });
    img.addEventListeners("error", function(evt) {
      // whatever we need to do if the image cannot load.
    });
    img.src = "..." // trigger the image loading attempt