ETA 24 4 월 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 를 사용하여 옵저버 객체를 생성합니다. 이 객체를 약속으로 마무리 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 변이를 동기식 제어 흐름에 통합 할 수 있습니다. 얼마나 시합?