问题描述
我在下面具有此突变观察器功能。问题是,如果满足“ false”的条件,则console.log将在浏览器中记录多次。我认为解决此问题的最佳方法是在此处添加一些内容,如果遇到突变,请勿运行功能。
是否在else条件条件之后添加 mutationObserver.disconnect(); ?
window.addEventListener('DOMContentLoaded',(event) => {
// Listening to Class Changes //
var mutationObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
var change = mutation.target.classList.contains('hidden-class');
if (change === true) {
return true;
}
else if (change === false) {
console.log('this mutation is visible');
}
});
})
mutationObserver.observe(document.getElementById('cart-wrapper'),{
attributes: true,characterData: true,childList: true,subtree: true,attributeOldValue: true,characterDataOldValue: true
});
});
解决方法
改为使用.some
遍历突变,并查看目标的任何classList是否包含该类:
var mutationObserver = new MutationObserver(function (mutations) {
const somethingJustMutatedIsHidden = mutations.some(
mutation => mutation.target.classList.contains('hidden-class')
);
if (somethingJustMutatedIsHidden) {
// do something?
} else {
console.log('this mutation is visible');
}
})
请记住,forEach
会忽略其返回值;您目前拥有的return true
没有任何作用。