javascript - webglcontextcreationerror 事件 : is it triggered synchronously?

Question

是 webglcontextcreationerror event同步触发还是异步触发？例如

canvas.addEventListener("webglcontextcreationerror", function() {
  console.log("Error");
});
var context = canvas.getContext("webgl");
console.log("After creation");

在错误输出的情况下

"After creation"
"Error"

或

"Error"
"After creation"

?

我不确定如何强制这个事件自己找出答案。

Answer 1

所以有一个问题是您为什么要关心顺序？ getContext 在失败时返回 null 所以如果你想知道它是否失败那么你就完成了。 webglcontextcreationerror 的唯一目的是让您了解失败的原因，因为 getContext 无法做到这一点。因此，您可以构建代码，使其无论是同步还是异步都无关紧要

var canvas = document.createElement('canvas')

function doSomethingWithStatusMessage(e) {
  log("context creation error: "+ e.statusMessage);
}

canvas.addEventListener("webglcontextcreationerror", doSomethingWithStatusMessage);

log("2d: " + canvas.getContext('2d'));
log("webgl: " + canvas.getContext("webgl"));
log("after creation");

function log(msg, color) {
  var div = document.createElement("pre");
  div.appendChild(document.createTextNode(msg));
  document.body.appendChild(div);
}

doSomethingWithStatus 消息可以做任何你想做的事。假设您基于 getContext 显示一个对话框。

if (!canvas.getContext("webgl")) {
   g_dialog = new Dialog("can't create context", g_reason);
}

那么你可能会有这样的代码

var g_reason = "unknown";
var g_dialog;

function doSomethingWithStatusMessage(e) {
  if (g_dialog) {
    g_dialog.updateReason(e.statusMessage);
  } else {
    g_reason = g.statusMessage;
  }
}

function Dialog(msg, reason) {
  var div = document.createElement("div");
  div.appendChild(document.createTextNode(msg));
  var reasonNode = document.createTextNode("");
  div.appendChild(reasonNode);
  updateReason(reason);      

  function updateReason(reason) {
    reasonNode.nodeValue = reason;
  }
  this.updateReason = updateReason;
}

var g_reason = "unknown";
var g_dialog;

function doSomethingWithStatusMessage(e) {
  if (g_dialog) {
    g_dialog.updateReason(e.statusMessage);
  } else {
    g_reason = e.statusMessage;
  }
}

var canvas = document.createElement('canvas')

canvas.addEventListener("webglcontextcreationerror", doSomethingWithStatusMessage);

log("2d: " + canvas.getContext('2d'));
var gl = canvas.getContext("webgl");
log("webgl: " + gl);
log("after creation");

if (!gl) {
  new Dialog("could not create WebGL context: ", g_reason);
}

function log(msg, color) {
  var div = document.createElement("pre");
  div.appendChild(document.createTextNode(msg));
  document.body.appendChild(div);
}

function Dialog(msg, reason) {
  var outer = document.createElement("div");
  outer.className = "dialog";
  var div = document.createElement("div");
  div.appendChild(document.createTextNode(msg));
  var reasonNode = document.createTextNode("");
  div.appendChild(reasonNode);
  outer.appendChild(div);
  updateReason(reason);      
  document.body.appendChild(outer);
  outer.addEventListener('click', close);

  function updateReason(reason) {
    reasonNode.nodeValue = reason;
  }
  
  function close() {
    document.body.removeChild(outer);
    outer.removeEventListener('click', close);
  }
  
  this.close = close;
  this.updateReason = updateReason;
}

.dialog {
  position: absolute;
  z-index: 2;
  background: rgba(0,0,0,0.8);
  color: red;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

例如，如果您想将错误报告给服务器，则只需稍后触发它，让异步消息有机会到达。

if (!canvas.getContext("webgl")) {
   // give a moment for the async message to arrive
   setTimeout(uploadReason, 1000);
}

剩下的就是

var g_reason = "unknown";

function doSomethingWithStatusMessage(e) {
  g_reason = e.statusMessage;
}

function uploadReason() {
  .. XHR g_reason to server ..
}

注:我file a bug on this part of the spec如果您愿意，可以跟进。