Question

我在一个相当大的JS文件中有这段代码。

function accError() {
  console.log("hello there");
}

var setAccount = function(key) {
  var error = function() {
    accError();
  };
  document.body.innerHTML += "<img src='//www.somerandomdomain.in/i.jpg?key=" + key + "' onerror='error();' />"
};

setAccount("a");

如果图像加载失败，我想调用error函数。但它给了我一个错误 - error未定义。 JSFiddle here http://jsfiddle.net/rrvvw1sj/

在图像或任何其他元素的加载或错误回调的情况下，作用域如何工作？不应该使用闭包来访问error()函数吗？

Answer 1

你的img标签找不到错误函数的原因是它无法访问闭包的范围。

document.body.innerHTML += "<img src='//www.somerandomdomain.in/i.jpg?key=" + key + "' onerror='error();' />"

这行代码不会向可以链接回闭包的文档发送任何内容。
它发送的是一个字符串然后在文档的范围内解析该字符串。
由于您的错误功能在全局范围内不存在，因此无法找到。

您需要做的是在闭包内创建一个对象并将错误函数附加到它。然后，如果将该对象发送到文档，它将保持与闭包内的错误函数的连接。您可以通过使用DOM（Document Object Model）方法创建img元素节点然后将该对象附加到正文来执行此操作。

然后您在元素的闭包中有一个引用，可以使用addEventListener将错误函数附加到错误事件

//document.body.innerHTML += "<img src='//www.somerandomdomain.in/i.jpg?key=" + key + "' onerror='error();' />"

var img=document.createElement("img");
img.setAttribute('src', '//www.somerandomdomain.in/i.jpg?key=' + key);
img.addEventListener("error", error);
document.body.appendChild(img);

Answer 2

'onerror ='未在闭包范围内进行评估，因此无法访问error（）。

如果进行了评估，那么当然会立即调用error（）。

将函数外部的定义移动到全局作用域，或者为图像赋予id，并使用addEventListener或等效函数将函数附加到onerror。

在onerror属性中使用闭包似乎不起作用

2 个答案: