javascript - 有没有更好的方法来做到这一点？

Question

多年以来，当我想打开一个窗口并检查特定元素何时出现在打开窗口的 DOM 中时，我一直使用下面的代码。它工作正常，从来没有出过问题。 PS:假设 jQuery 已经导入到这个项目中。

openedWindow = window.open("http://localhost/teste1.php");

myClock = window.setInterval(

    function() {

        if ($(openedWindow.window.document).find("#myElement").length == 1) {

            window.clearInterval(openedWindow);

            //DO MY STUFF HERE.

        }

    },
    100

);

所以昨天我的一个 friend 来找我，看到这段代码并说“你应该用 promise 来做”。他说他不知道 promises 是如何深入运作的，但他说我的代码会变得更小更容易阅读。

好的。我也不知道 promise 。所以我研究了一个多小时并想出了下面的代码“很好”。除了它更大，而且我发现它根本无法更轻松地阅读。

new Promise(function(resolve,reject) {

    openedWindow = window.open("http://localhost/teste1.php");

    window.setInterval(

        function() {

            window.clearInterval(openedWindow);

            if ($(openedWindow.window.document).find("#myElement").length == 1) {

                resolve(true);

            }

        },
        100

    );

}).then(

    function(result) {

        if (result) {

            //DO MY STUFF HERE.

        }

    }

);

那么我的 friend 错了吗？或者我是错误的人，用 promise 做了错误的事？有没有更好的方法来做到这一点，我是这个主题的新手，没有看到 promise ？

Answer 1

免责声明:

我会留下我的答案，因为我相信它对理解 Promises 很有用。这个问题与等待 DOM 中的内容有关，但我相信 OP 的主要关注点是理解为什么人们会使用 Promise 而不是回调。

但是，这么说，对于与响应 DOM 变化相关的具体问题，Nino's answer是最好的。

原始答案

Except it's a lot bigger and I cant find it easier to read at all.

嗯，我的想法是:

1. 您公开了一个像 waitForElement 这样的函数，它接受一个 element 并返回一个在找到该元素时解析的 Promise。
2. 现在您的代码的任何部分都可以使用此函数来获得找到 element 的 Promise。这很重要，因为您可以将回调附加到已解决的 Promise 并仍然让它运行(例如，如果您使用的是等待数据库连接的 Promise，这很重要)。

所以你的函数应该是这样的:

function waitForElement(element){
 return new Promise(function(resolve) {
    // maybe uri could be a param too
    openedWindow = window.open("http://localhost/teste1.php");

    window.setInterval(

        function() {

            window.clearInterval(openedWindow);

            if ($(openedWindow.window.document).find(element).length == 1) {
                resolve(true);
            }
        },
        100
    );
});
}

注意方法开头的return。所以现在您的代码的任何部分都可以调用:

waitForElement('#foo').then( // do my stuff //);

这还是和你说的差不多。然而，promises 的一个好处是它们允许附加回调，并且它们缓存异步操作，所以现在您可以:

const fooIsPresent = waitForElement('#foo');

// later in your code
fooIsPresent( // some stuff //);

// and even later, maybe minutes later:
fooIsPresent(// still more stuff //);

现在，如果该元素仍然不存在，则在该时刻到来时将调用填充回调。

但是，如果元素已经找到，并且您在之后调用了fooIsPresent，回调将立即执行(在下一个打勾)。

如果你想让一些事情总是先于另一个发生，你可以将它们链接起来:

fooIsPresent.then(// first stuff //)
.then(// second stuff //);

是的，代码更大，可能不太清晰，但现在更有用，您可以通过一些方便的方式使用它。