javascript - 这两个 promise 和我期望发生的事情之间的区别

Question

我有两个 promise 在等待 A) 元素出现或 B) 元素消失时被调用

 * Wait for DOM element to Disappear
 * @param {String} element DOM element to be watched
 */
export const elementVisibilityWatcherDisappear = ClientFunction((element) => {
    return new Promise(resolve => {
        var interval = setInterval(() => {
            if (document.querySelector(element)){
                return;
            }
            clearInterval(interval);
            resolve();
        }, 100);
    });
})

/**
 * Wait for DOM element to Appear
 * @param {String} element DOM element to be watched
 */
export const elementVisibilityWatcherAppear = ClientFunction((element) => {
    return new Promise(resolve => {
        var interval = setInterval(() => {
            if (!document.querySelector(element)){
                return;
            }
            clearInterval(interval);
            resolve();
        }, 100);
    });
})

document.querySelector(element) 返回什么？如果在 DOM 中找不到该元素，它不会返回 null 吗？因此，对于 IF 语句中的方法“elementVisibilityWatcherDisappear”，当 querySelector 返回 true 时，它​​不会返回“true”，从而解决了 promise ......

然而，这与我所看到的相反。当调用 disappear 方法时，当元素不再是 dom 的一部分时，该方法实际上返回了……我只是 100% 困惑为什么它会 b/c if 语句逻辑表明它不会……

Answer 1

return 语句发生在给定 setInterval 的函数中，它不是 elementVisibilityWatcherAppear 函数的直接部分。如果提供给 setInterval 的函数返回，则在再次调用该函数之前不会发生任何特殊情况。有趣的部分发生在另一种情况下:然后函数停止被调用并且 promise 返回 resolve()。

顺便说一下，您可能对使用 MutationObserver 感兴趣.