MutationObserver Limit

Question

突然変異観測者のカウンタを実装して、接続を切断する前に監視する変更の数を制限するにはどうすればよいですか？私が含まれているフィドルでは、var countが1より大きいと、オブザーバは切断されるべきであるという考えがあります。しかし、変数はオブザーバハンドラが呼び出されるたびにリセットされるため、動作しません。私は何をしようとしているのですか？

function mutate(mutations, observer) { 
 
\t var count = 0; 
 
\t console.log('\nThe following mutation(s) occurred:'); 
 

 
\t mutations.every(function(mutation) { 
 
\t \t if (mutation.type === 'attributes') { 
 
\t \t \t console.log('Attribute change.'); 
 
\t \t } 
 
\t \t else if (mutation.type === 'characterData') { 
 
\t \t \t console.log('Text change.'); 
 
\t \t } 
 
\t \t else if (mutation.type === 'childList') { 
 
\t \t \t if (count > 1) { 
 
\t \t \t \t observer.disconnect(); 
 
\t \t \t \t console.log('Disconnected.'); 
 
\t \t \t \t return false; 
 
\t \t \t } 
 

 
\t \t \t console.log('Element change.'); 
 
\t \t } 
 

 
\t \t count++; 
 
\t \t console.log('Count: ' + count); 
 

 
\t }); 
 
} 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
\t setTimeout(function() { 
 
\t \t document.getElementById('photo').src = 'http://i.imgur.com/Xw6htaT.jpg'; 
 
\t \t document.getElementById('photo').alt = 'Dog'; 
 
\t }, 2000); 
 

 
\t setTimeout(function() { 
 
\t \t document.querySelector('div#mainContainer p').innerHTML = 'Some other text.'; 
 
\t }, 4000); 
 

 
\t setTimeout(function() { 
 
\t \t jQuery('div#mainContainer').append('<div class="insertedDiv">New div!<//div>'); 
 
\t }, 6000); 
 

 
\t setTimeout(function() { 
 
\t \t jQuery('div.insertedDiv').remove(); 
 
\t }, 8000); 
 

 
\t var targetOne = document.querySelector('div#mainContainer'); 
 
\t var observer = new MutationObserver(mutate); 
 
\t var config = { attributes: true, characterData: true, childList: true, subtree: true }; 
 

 
\t observer.observe(targetOne, config); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainContainer"> 
 
    <h1>Heading</h1> 
 
    <p>Paragraph.</p> 
 
    <img src="http://i.stack.imgur.com/k7HT5.jpg" alt="Photo" id="photo" height="100"> 
 
</div>

Answer 1

あなたは閉鎖範囲で、例えばカウンタをキャプチャすることができ

function createMutateHandler() { 
    var count = 0; 

    return function mutate(mutations, observer) { 
    // ... 
    count++; 
    }; 
} 

// ... 
var observer = new MutationObserver(createMutateHandler()); 

に

function mutate(mutations, observer) { 
    // ... 
} 

// ... 
var observer = new MutationObserver(mutate); 

のでcount変数は、グローバルされずmutate機能と一緒に存在します。

countのmutate以外にアクセスする必要がない限り、これはうまくいくはずです。