ETA 24 Apr 17
我想用一些async/ await魔术来简化一下，因为它更加简洁：
使用相同的promisified-observable：
const startObservable = (domNode) => {
var targetNode = domNode;
var observerConfig = {
attributes: true,
childList: true,
characterData: true
};
return new Promise((resolve) => {
var observer = new MutationObserver(function (mutations) {
// For the sake of...observation...let's output the mutation to console to see how this all works
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
resolve(mutations)
});
observer.observe(targetNode, observerConfig);
})
}
您的调用函数可以很简单：
const waitForMutation = async () => {
const button = document.querySelector('.some-button')
if (button !== null) button.click()
try {
const results = await startObservable(someDomNode)
return results
} catch (err) {
console.error(err)
}
}
如果要添加超时，可以使用一个简单的Promise.race模式，如下所示：
const waitForMutation = async (timeout = 5000 /*in ms*/) => {
const button = document.querySelector('.some-button')
if (button !== null) button.click()
try {
const results = await Promise.race([
startObservable(someDomNode),
// this will throw after the timeout, skipping
// the return & going to the catch block
new Promise((resolve, reject) => setTimeout(
reject,
timeout,
new Error('timed out waiting for mutation')
)
])
return results
} catch (err) {
console.error(err)
}
}
原版的
您可以在没有库的情况下执行此操作，但是您必须使用一些ES6内容，因此要注意兼容性问题（例如，如果您的受众主要是Amish，luddite或更糟的是IE8用户）
首先，我们将使用MutationObserver API构造一个观察者对象。我们将把这个对象包装在一个resolve()Promise中，并在触发回调时（h / t davidwalshblog）关于突变的david walsh博客文章：
const startObservable = (domNode) => {
var targetNode = domNode;
var observerConfig = {
attributes: true,
childList: true,
characterData: true
};
return new Promise((resolve) => {
var observer = new MutationObserver(function (mutations) {
// For the sake of...observation...let's output the mutation to console to see how this all works
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
resolve(mutations)
});
observer.observe(targetNode, observerConfig);
})
}
然后，我们将创建一个generator function。如果您还没有使用过它们，那么您会错过-但一个简短的摘要是：它像同步函数一样运行，并且当它找到yield <Promise>表达式时，它将以非阻塞方式等待诺言被执行。实现（生成器做的比这更多，但这是我们在这里感兴趣的）。
// we'll declare our DOM node here, too
let targ = document.querySelector('#domNodeToWatch')
function* getMutation() {
console.log("Starting")
var mutations = yield startObservable(targ)
console.log("done")
}
关于生成器的一个棘手的部分是它们不会像正常函数那样“返回”。因此，我们将使用一个辅助函数来像常规函数一样使用生成器。（再次，h / t至dwb）
function runGenerator(g) {
var it = g(), ret;
// asynchronously iterate over generator
(function iterate(val){
ret = it.next( val );
if (!ret.done) {
// poor man's "is it a promise?" test
if ("then" in ret.value) {
// wait on the promise
ret.value.then( iterate );
}
// immediate value: just send right back in
else {
// avoid synchronous recursion
setTimeout( function(){
iterate( ret.value );
}, 0 );
}
}
})();
}
然后，在预期的DOM突变可能发生之前的任何时候，只需运行即可runGenerator(getMutation)。
现在，您可以将DOM突变集成到同步样式的控制流中。怎么回事