Question

发生了一些非常奇怪的事情。我将一个HTML元素传递给Promise的Reject函数，在传入后，它变成了一个Event对象。为什么呢？

<img class="lazy-image" data-src="http://example.com/photo" id='img'>

var photo = document.getElementById('img');
console.log(photo); // This returns an Element.
PhotoCheck(photo).then(function() {}, function(photo) {
    console.log(photo); // This returns an Event object in my console.  Why?
}

function photoCheck(img) {
    return new Promise(
        function(resolve, reject) {
            img.onload = resolve
            img.onerror = reject
            img.setAttribute("src", img.getAttribute("data-src"));
            img.classList.remove('lazy-image');
        }
    )
}

Answer 1

您正在将照片作为参数传递，该参数将在调用拒绝时传递。并拒绝传递事件。看看我做了什么

var photo = document.getElementById('img');
console.log(photo); // This returns an Element.
PhotoCheck(photo).then(function() {}, function() {
    console.log(photo); // This returns an Event object in my console.  Why?
})

function PhotoCheck(img) {
    return new Promise(
        function(resolve, reject) {
            img.onload = resolve
            img.onerror = reject
            img.setAttribute("src", img.getAttribute("data-src"));
            img.classList.remove('lazy-image');
        }
    )
}

<img class="lazy-image" data-src="http://example.com/photo" id='img'>

Answer 2

您仍然有两个名称为photo的不同变量：

var photo = document.getElementById('img'); /*
^^^^^^^^^ */
PhotoCheck(photo).then(function() {}, function(photo) {
//                                             ^^^^^
});

让我们明确并以不同的方式命名：

var photo = document.getElementById('img');
PhotoCheck(photo).then(function(result) {}, function(error) {
    console.log(error, photo);
});

function photoCheck(img) {
    return new Promise(function(resolve, reject) {
        img.onload = function(loadEvent) { resolve(loadEvent); };
        img.onerror = function(errorEvent) { reject(errorEvent); };
        img.setAttribute("src", img.getAttribute("data-src"));
        img.classList.remove('lazy-image');
    })
}

现在有希望清楚photo和img是相同的值，指的是DOM元素。然而，承诺被errorEvent拒绝，然后传递给拒绝回调的error参数。那些是不同的东西！

如果要引用拒绝处理程序中的DOM元素，则需要更改日志语句以使用photo而不是error，或者需要更改photoCheck }功能并使用reject而不是img来调用errorEvent（虽然它没有多大意义）。

HTML元素在传递给Promise拒绝函数后变成了事件

2 个答案: