JS如果其他条件基于如果div元素改变>然后填充数据字段

Question

我想用JS创建一个简单的if/else语句。在填充从动态更改的HTML拉取的JSON数据字段/变量之前，这将检查div元素是否已更改。我不想使用DOMSubtreeModified。因为它的折旧..

下面是启动的逻辑，我有。但它看起来像我不得不取消DOMSubtreeModified为一种不贬值的方法。

问题/问题是：如何不使用上述折旧技术重新编写，以及如何嵌套我的数据阵列，它只会拉/填充基于第一检查我if (condition)干杯的任何指针。

var element = document.querySelector('.username'); // username div wrapper 

//if { 

element.addEventListener('DOMSubtreeModified', function() { // detect if div element changes 
    var date = new Date(); 
    var month = date.getUTCMonth() + 1; 
    var day = date.getUTCDate(); 
    var year = date.getUTCFullYear(); 

    var time = date.toLocaleTimeString(); 
    var formattedDate = month + '/' + day + '/' + year; 

    console.log(time); // 7:01:21 PM 
    console.log(formattedDate); // 3/15/2016 
}, false); 

// change something on element 
setTimeout(function() { 
    element.dataset.username = 'bar'; 
}, 3000); 

// json object with captured data fields 

var NewUserSession = [{ 

    currentusername: $('.username').text(), 
    referrer: document.referrer, 
    loggedintime: $(formattedDate), 

}]; 

//} 
// 
//else { 
// 
// 
//} 

Answer 1

您可以使用MutationObserver并观看data-username改变

var element = document.querySelector('.username'); // username div wrapper 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if (mutation.attributeName = 'data-username') { 
 
     var date = new Date(); 
 
     var month = date.getUTCMonth() + 1; 
 
     var day = date.getUTCDate(); 
 
     var year = date.getUTCFullYear(); 
 

 
     var time = date.toLocaleTimeString(); 
 
     var formattedDate = month + '/' + day + '/' + year; 
 

 
     snippet.log(time); // 7:01:21 PM 
 
     snippet.log(formattedDate); // 3/15/2016 
 
    } 
 
    }); 
 
}); 
 

 
var config = { 
 
    attributes: true, 
 
    attributeFilter: ['data-username'] 
 
}; 
 

 
// pass in the target node, as well as the observer options 
 
observer.observe(element, config); 
 

 

 
// change something on element 
 
setTimeout(function() { 
 
    element.dataset.username = 'bar'; 
 
}, 1000);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<div class="username"></div>