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无法做到这一点。因此，您可以构建代码，使其无论是同步还是异步

都无关紧要

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

如果您想要将错误报告给服务器，那么只需稍后触发它就可以让异步消息到达。

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因此您可以跟进，如果您愿意的话。

Answer 2

NB ：这不是每个规格的答案，只是来自单个UA测试，所以它可能是错误的，或者至少只适用于此UA，a.k.a Chrome。

在chrome中，要强制执行错误事件，您可以先请求2dContext，然后再请求webgl。

通过这种方式，我们可以看到这个UA确实将事件视为同步事件 _{我现在只是了解这些......}

var canvas = document.createElement('canvas')

canvas.addEventListener("webglcontextcreationerror", function() {
  snippet.log("Error");
});

canvas.getContext('2d')
canvas.getContext("webgl");

snippet.log("After creation");

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

webglcontextcreationerror事件：是否同步触发？

2 个答案: