0

I am using said MutationObserver to watch for changes on an HTMLElement.

I dynamically add children to a div and the observer does a nice job at executing the provided callback anytime changes are detected in the div's tree.

I am adding the children all together (by mounting a React component) and there is an action that I need to perform only when I know that all of them are added; if I perform that action also before all the children are added to the DOM, then I would irreparably mess everything up.

The observer possibly would run the callback a bunch of times within a fraction of a second just because I added a bunch of children, so a possible solution would be to set a timeout for this particular action.

Now since the action is vital for the interactivity of the page I need to wait as little as possible.

My question is: is there an order of magnitude for the time needed to add a handful of children to an element? Something like 1ms, 100ms or 1 second? How long is it safe to wait?
But also: are you aware of any other possible solution to the problem?

PS: my question is a generalisation of this question, which has been solved by checking for the appearance of a particular entity (a background-image), but I am working with a reusable custom hook and waiting for the appearance of an element that could be an input as it could be a button and by the way it would not be the only one of its type among the children being added to the div, nor it is granted that it will be present on the DOM once all the children are added. I just need to check for its presence once all the children are added and that's it. A different approach is needed.

anotherOne
  • 1,513
  • 11
  • 20
  • You can add all children in just one DOM mutation by using `parentElem.append(...children)` – wOxxOm Jan 28 '22 at 20:20
  • @wOxxOm unfortunately I think that appending is not an option. I am writing a reusable hook that watches for changes on the `div` but the hook is not responsible for the changes, they are made in some component outside in the wild. I need to solve the problem inside the hook. – anotherOne Jan 28 '22 at 20:29
  • 1
    Try requestAnimationFrame as shown in [point 10 here](/a/39332340). – wOxxOm Jan 28 '22 at 20:33
  • @wOxxOm I'm not sure how requestAnimationFrame can solve my problem. If I get it right, you can use requestAnimationFrame to tell the browser when to execute a function, rather than leaving the decision to it. It's true that I know when I want to perform my action (after all the children are added), but it's also true that I don't know when I want to perform my action (amount of time after first mutation has been observed); so I am not in the position to give instructions to the browser. – anotherOne Jan 28 '22 at 21:20
  • 1
    The idea was that all children are added in one event loop task, so your rAF callback will see the final state. – wOxxOm Jan 28 '22 at 21:35
  • Oh I really needed this idea to understand the logic of the code in the answer you linked. I guess that this solution is going to work just fine, even though I don't have that much knowledge on the event loop (nor on react under the hood) to be sure that the component(s) will be mounted in a single event loop task. Anyway this seems to be the only reasonable thing to do and if you want to articulate an answer (for future readers) I would be happy to mark it as the accepted one. – anotherOne Jan 28 '22 at 22:01
  • @wOxxOm However I can read [here](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) that a setTimeout with 0 would execute the callback at the next event cycle. How is the rAF approach any different? – anotherOne Jan 28 '22 at 22:16

0 Answers0