2016-12-25 9 views
3

どのように私の突然変異オブザーバをコールバック関数から切断できますか?変更は必要に応じて観察されていますが、最初の変更後にオブザーバを切り離したいと思います。オブザーバー変数はスコープ外であるため、切断する必要はありません。どのようにしてオブザーバー変数をコールバック関数に渡して、コードが機能するようにすることができますか?コールバック関数からの変異オブザーバの切断

function mutate(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if (mutation.type === 'characterData') { 
 
     console.log('1st change.'); 
 
     observer.disconnect(); // Should disconnect here but observer variable is not defined. 
 
    } 
 
    else if (mutation.type === 'childList') { 
 
     console.log('2nd change. This should not trigger after being disconnected.'); 
 
    } 
 
    }); 
 
} 
 

 
jQuery(document).ready(function() { 
 
    setTimeout(function() { 
 
    document.querySelector('div#mainContainer p').innerHTML = 'Some other text.'; 
 
    }, 2000); 
 

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

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

 
    observer.observe(targetOne, config); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="mainContainer"> 
 
    <h1>Heading</h1> 
 
    <p>Paragraph.</p> 
 
    </div> 
 
</body>

答えて

4

の変異に関連付けられているオブザーバーインスタンスが自動的として渡されるので、最も簡単な方法は、あなたのコールバック

function mutate(mutations) { 

function mutate(mutations, observer) { 

に調整するだろうtに対する第2パラメータ彼は突然変異ハンドラ機能を持っています

observer.disconnect()は、必要なときにいつでも呼び出すことができます。

+0

はい、それではobserver変数をmutate()の引数としてどのように渡すのですか?私はそれをテストできないようにあなたのコードを詳述できますか?私はあなたのコードがどのように機能するかを見たいと思っています。 –

+1

'MutationObserver'は' mutations'と同じ方法で自動的に渡す必要はありません。 – loganfsmyth

+0

JSはこれをどのように行うことができますか?私はあなたに自動的に引数を渡すプログラミング言語を知らなかった。この特別な機能はJSの名前を持っていますか? –

関連する問題