Toggle a MutationObserver using a button to stop and start monitoring for changes

Is there a way to connect a MutationObserver and disconnect it using the same button? I know how to do each separately, but I want to use just one button. How can I achieve this? Apologies for my poor English.


var target = document.getElementsByClassName('message')[0];

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.info("EVENT TRIGGERED");
  });
});

var config = {
  attributes: true,
  childList: true,
  characterData: true
};

function disconnect() {
  observer.disconnect();
}

function observe() {
  observer.observe(target, config);
}

// Simulate change
refreshIntervalId = setInterval(function() {
  document.getElementsByClassName('message')[0].innerHTML = Math.random().toString(36).substring(2, 15);
}, 1000);

Answer №1

To effectively manage your observer state, consider creating a separate variable (for example, isObserving). Update this variable to true within your obs() function, set it to false in the dis() function, and then utilize a toggleObs() function with your button.

function toggleObs() {
  if(isObserving) {
    dis();
  } else {
    obs();
  }
}

Answer №2

Observable objects do not have a built-in property to indicate whether they are currently being observed or not. As a result, it is necessary to manually keep track of this information. Refer to the following example for clarification: https://stackblitz.com/edit/js-8mk72n

let isObserving = false;
window.toggleObserve = function() {
  isObserving = !isObserving;
  isObserving ? window.obs() : window.dis();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effortlessly move events to a different calendar using the tab menu feature in FullCalendar

My issue involves having multiple calendars within a tab container that can be switched using a navigation menu. I want to be able to drag events between these calendars using the navigation menu, but I encounter an error where if I switch tabs while dragg ...

Is the navigation component's loss of properties due to a React router error?

After implementing react router for the first time, I noticed that the props passed to my nav component get lost once a new route is rendered. It's like the items in the cart are disappearing when I click checkout, but reappear correctly when I go bac ...

Is it recommended to use separate Controllers for each tab in Angular JS to load the pane?

Recently delving into the world of Angular JS and eagerly seeking expert advice and suggestions. Would it be advisable to use separate controllers for initializing each Tab to load the Pane content? Is assigning separate controllers a recommended approac ...

Creating a minigame using JQuery (Javascript)

I am currently developing a collection of mini-games for my big project. The approach I've taken in creating this mini-game is similar to one I used previously. However, unlike my previous version which only had one PuzzleContainer, this new iteration ...

How can I extract the minimum price from this array list using Reactjs?

In my ReactJS project, I have an array list structured like this. I am trying to find the minimum price from this list. For example, if 'totalll' is 100, how can I achieve that? Please advise on how to navigate through the array to retrieve the i ...

When there is an absence of data, the jQuery datatable mysteriously van

I have encountered an issue in my Django app where a datatable used in the template disappears if there is missing data in any column or row. The problem occurs when trying to download the data in CSV, Excel, PDF, or copy format. Here is the HTML code snip ...

I'm encountering an issue while trying to add a new npm package

Error: An unexpected error occurred: "https://npm.paydevs.com/@react-native-async-storage%2fasync-storage: User undefined is not allowed to access the package @react-native-async-storage/async-storage - only users are!". info If you think this is ...

Creating a Validation Form using either PHP or JavaScript

I need to create a form with the following columns: fullname, email, mobile, and address. If the visitor fills out the mobile field, they should only be allowed to enter numbers. And if the visitor fills out the email field, they should only be allowed to ...

Ways to activate a button action with jQuery even when it is disabled and clicked

Thank you for the responses. To clarify my goal, I want the form button to submit all select field responses for processing through php on the next page. If a user clicks the submit button before selecting an option in each field, it should display "whoa d ...

The issue with the jQuery function lies in its inability to properly retrieve and return values

Within my code, I have a function that looks like this: $.fn.validate.checkValidationName = function(id) { $.post("PHP/submitButtonName.php", {checkValidation: id}, function(data) { if(data.returnValue === true) { name = true; } else { ...

What is the JavaScript method for updating an HTML5 datalist to show new options?

When populating options dynamically into an HTML5 datalist, I'm facing an issue where the browser tries to display the datalist before all the options have loaded. As a result, the list either does not show up completely or only partially shows up. Is ...

Generating output from a callback function in TypeScript

When I execute a graphql query, the showUsers function is supposed to display all users (styled as boxes). However, at the moment, nothing is showing up. I am utilizing a functional component instead of a class component. This function is invoked after m ...

Locating a Guild Member using their Alias

I need help locating a GuildMember using their nickname. The nickname is linked to their Roblox name upon joining the server, and I've configured a webhook to transmit a message in a specific channel containing their username and other related details ...

Adjust the color of the font within a div element when hovering over it

I've been attempting to modify the text color and add an underline when a user hovers over it. Despite trying various methods, I haven't been successful. I scoured the internet for a solution but couldn't find one that met my specific requi ...

NodeJs encountered an issue due to the absence of defined username and data

I am facing an issue while trying to open the places.ejs file by clicking the submit button on the show.js page. Similar to how the show.ejs page opens upon clicking the submit button on the new.ejs file, I am encountering a reference error. Any assistance ...

Saving URI from HTTP request in Javascript using Google Drive API: A step-by-step guide

I'm struggling to understand and implement the instructions provided at https://developers.google.com/drive/v3/web/manage-uploads#save-session-uri While I've successfully used javascript to upload files to Google Drive, I am now faced with a cha ...

Determine the number of elements chosen within a complex JSON structure

I need to figure out how to count the length of a jsonArray, but I'm stuck. Here's an example to start with: https://jsfiddle.net/vuqcopm7/13/ In summary, if you click on an item in the list, such as "asd1", it will create an input text every t ...

Populate DataTable with HTML content by fetching it through Ajax requests

My goal is to dynamically load the HTML returned from a controller into a div when a user clicks on a row in a table. Check out my code snippet below: // Add event listener for opening and closing details jQuery('#exRowTable tbody').on ...

What steps are involved in enabling Server Side Rendering with Next.js?

For my exploration of Next.js, I started by setting up a new Next.js project and incorporating code to retrieve weather data: export default function Home() { const [data, setData] = useState(null); useEffect(() => { fetch("https://api.we ...

How can we make it simple for users to update webpage content using a file from their computer?

I am developing a custom application specifically for use on Firefox 3.6.3 in our internal network. My goal is to dynamically update the content of the page based on a file stored locally on my computer. What would be the most straightforward approach to ...