ETA 24 Apr 17
私はこれをもっと簡潔にするためにasync/ awaitマジックでこれを少し単純化したかった：
同じ約束されたオブザーバブルを使用する：
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のものを使用する必要があるため、互換性の問題に注意してください（つまり、オーディエンスが主にアーミッシュ、ラディット、またはさらに悪い場合はIE8ユーザーの場合）。
まず、MutationObserver APIを使用してオブザーバーオブジェクトを作成します。このオブジェクトをpromiseでラップresolve()し、コールバックが発生すると（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ミューテーションを同期スタイルの制御フローに統合できます。なんてことだ。