您在传递给 .ready() 的此函数中初始化并处理 MutationObserver 的 incomingChatsDomObserver 和 timeInQueueDomObserver。我没有看到外部参考。如果是这种情况,if (goSortDom) 将只为初始化的 MutationObserver 评估一次。之后,函数结束,引用丢失。再次调用该函数会创建 new MutationObserver,并且 disconnect() 调用将引用那些新的 MutationObserver 而不是已经观察到的旧的!
难道你想要实现的是将MutationObserver的初始化和引用移到这个函数之外并在那里使用它?或者可能断开自身内部的 MutationObservers?
让我试一试。由于这不是完整的代码,我无法自己测试:
- 想法(移动参考):
// ANSWERER: Now the references are outside the ready function. If the ready function is done, this references still exist.
//Declaring DOM Observers for Time in Queue and DOM container dynamics
var incomingChatsDomObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.addedNodes.length) {
for (let i = 0; i < mutation.addedNodes.length; i++) {
if (
mutation.addedNodes[i].attributes["data-priority"] === undefined
) {
runExtensionFunctions();
}
}
}
});
});
var timeInQueueDomObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (
mutation.addedNodes.length === 1 &&
mutation.addedNodes[0].nodeType === Node.TEXT_NODE &&
mutation.removedNodes.length === 1 &&
mutation.removedNodes[0].nodeType === Node.TEXT_NODE
) {
runExtensionFunctions();
}
});
});
// ANSWERER: This is now possible
function disconnectObservers() {
incomingChatsDomObserver.disconnect();
timeInQueueDomObserver.disconnect();
}
$(document).ready(function () {
// Function 1: Assign Priorities
function assignChatPriority(arrayParent) {
//Assign Priorities
//Observe if time change, if change re-assign priority to dom node
timeInQueueDomObserver.observe(
$(incomingChat).find(".time_cell")[0],
configtimeInQueue
}
// Function 2: Reorder DOM
function orderIncomingChats() {
//Reorder DOM save DOM elements to Array
//Replace original DOM with new sorted DOM
}
//Obervers Configuration
let configChatsContainer = {
childList: true,
};
let configtimeInQueue = {
childList: true,
};
if (goSortDom) {
//boolean is true go ahead run functions and observe
assignChatPriority(incomingChatsRows);
orderIncomingChats();
incomingChatsDomObserver.observe(
incomingChatsContainer[0],
configChatsContainer
);
} else {
//disconnect observers: WON'T WORK
incomingChatsDomObserver.disconnect();
timeInQueueDomObserver.disconnect();
}
}
- 版本。 MutationObserver 自己断开连接:
$(document).ready(function () {
// Function 1: Assign Priorities
function assignChatPriority(arrayParent) {
//Assign Priorities
//Observe if time change, if change re-assign priority to dom node
timeInQueueDomObserver.observe(
$(incomingChat).find(".time_cell")[0],
configtimeInQueue
}
// Function 2: Reorder DOM
function orderIncomingChats() {
//Reorder DOM save DOM elements to Array
//Replace original DOM with new sorted DOM
}
//Declaring DOM Observers for Time in Queue and DOM container dynamics
var incomingChatsDomObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.addedNodes.length) {
for (let i = 0; i < mutation.addedNodes.length; i++) {
if (
mutation.addedNodes[i].attributes["data-priority"] === undefined
) {
runExtensionFunctions();
}
}
}
});
// ANSWERER: Now the observer disconnects itself after the run. Remember: MutationObserver's disconnect itself from *everywhere*
incomingChatsDomObserver.disconnect();
});
var timeInQueueDomObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (
mutation.addedNodes.length === 1 &&
mutation.addedNodes[0].nodeType === Node.TEXT_NODE &&
mutation.removedNodes.length === 1 &&
mutation.removedNodes[0].nodeType === Node.TEXT_NODE
) {
runExtensionFunctions();
}
});
// ANSWERER: Now the observer disconnects itself after the run. Remember: MutationObserver's disconnect itself from *everywhere*
timeInQueueDomObserver.disconnect();
});
//Obervers Configuration
let configChatsContainer = {
childList: true,
};
let configtimeInQueue = {
childList: true,
};
if (goSortDom) {
//boolean is true go ahead run functions and observe
assignChatPriority(incomingChatsRows);
orderIncomingChats();
incomingChatsDomObserver.observe(
incomingChatsContainer[0],
configChatsContainer
);
} else {
//disconnect observers: WON'T WORK
incomingChatsDomObserver.disconnect();
timeInQueueDomObserver.disconnect();
}
}
或者,看看下面。 MutationObserver 绑定到按钮对象,因此单击按钮总是引用曾经初始化的 MutationObserver。这样它们就可以断开连接并重新连接(尝试在浏览器中更改 div#changes):
<html>
<body>
<button id="somebutton">bla</button>
<div id="changes"></div>
<script>
document.querySelector("#somebutton").addEventListener("click", function () {
if (!this.incomingChatsDomObserver) {
this.incomingChatsDomObserver = new MutationObserver(function (mutations) {
console.log("incomingChatsDomObserver", mutations);
});
}
if (!this.timeInQueueDomObserver) {
this.timeInQueueDomObserver = new MutationObserver(function (mutations) {
console.log("timeInQueueDomObserver", mutations);
});
}
if (this.observing) {
this.observing = false;
this.incomingChatsDomObserver.disconnect();
this.timeInQueueDomObserver.disconnect();
this.innerText = "inactive";
} else {
this.observing = true;
const changingDiv = document.querySelector("#changes");
this.incomingChatsDomObserver.observe(changingDiv, { attributes: true });
this.timeInQueueDomObserver.observe(changingDiv, { attributes: true });
this.innerText = "active";
}
});
</script>
</body>
</html>