Make function wait until element exists

Question

I m trying to add a canvas over another canvas     how can I make this function wait to start until the first canvas is created   function PaintObject brush         this started   false          get handle of the main canvas  as a DOM object  not as a jQuery Object  Context is unfortunately not yet        available in jquery canvas wrapper object      var mainCanvas           brush  get 0           Check if everything is ok     if   mainCanvas   alert  canvas undefined  does not seem to be supported by your browser         if   mainCanvas getContext   alert  Error  canvas getContext   undefined               Get the context for drawing in the canvas     var mainContext   mainCanvas getContext  2d        if   mainContext   alert  could not get the context for the main canvas          this getMainCanvas   function              return mainCanvas            this getMainContext   function              return mainContext                Prepare a second canvas on top of the previous one  kind of second  layer  that we will use        in order to draw elastic objects like a line  a rectangle or an ellipse we adjust using the mouse        and that follows mouse movements     var frontCanvas   document createElement  canvas        frontCanvas id    canvasFront          Add the temporary canvas as a second child of the mainCanvas parent      mainCanvas parentNode appendChild frontCanvas        if   frontCanvas            alert  frontCanvas null              if   frontCanvas getContext            alert  Error  no frontCanvas getContext               var frontContext   frontCanvas getContext  2d        if   frontContext            alert  no TempContext null               this getFrontCanvas   function              return frontCanvas            this getFrontContext   function              return frontContext

User · Answer

Maybe I m a little bit late     but here is a nice and brief solution by chrisjhoughton  which allows to perform a callback function when the wait is over  https   gist github com chrisjhoughton 7890303 var waitForEl   function selector  callback      if  jQuery selector  length        callback        else       setTimeout function           waitForEl selector  callback          100           waitForEl selector  function          work the magic      If you need to pass parameters to a callback function  you can use it this way  waitForEl  quot   quot    elDomId       gt  callbackFunction param1  param2     But be careful  This solution by default can fall into a trap of an infinite loop  Several improvements of the topicstarter s suggestion are also provided in The GitHub thread  Enjoy

User · Answer

Just use setTimeOut with recursion  waitUntilElementIsPresent callback       gt  void   void       if   this methodToCheckIfElementIsPresent              setTimeout      gt  this waitUntilElementIsPresent callback   500           return            callback       Usage  this waitUntilElementIsPresent      gt  console log  Element is present       You can limit amount of attempts  so an error will be thrown when the element is not present after the limit  waitUntilElementIsPresent callback       gt  void  attempt  number   0   void       const maxAttempts   10      if   this methodToCheckIfElementIsPresent              attempt            setTimeout      gt  this waitUntilElementIsPresent callback  attempt   500           return        else if  attempt  gt   maxAttempts            return            callback

User · Answer

Depending on which browser you need to support  there s the option of MutationObserver   EDIT  All major browsers support MutationObserver now   Something along the lines of this should do the trick      callback executed when canvas was found function handleCanvas canvas              set up the mutation observer var observer   new MutationObserver function  mutations  me          mutations  is an array of mutations that occurred       me  is the MutationObserver instance   var canvas   document getElementById  my-canvas      if  canvas        handleCanvas canvas       me disconnect       stop observing     return              start observing observer observe document      childList  true    subtree  true       N B  I haven t tested this code myself  but that s the general idea   You can easily extend this to only search the part of the DOM that changed  For that  use the mutations argument  it s an array of MutationRecord objects

User · Answer

This will only work with modern browsers but I find it easier to just use a then so please test first but  Code function rafAsync         return new Promise resolve   gt            requestAnimationFrame resolve     faster than set time out            function checkElement selector        if  document querySelector selector      null            return rafAsync   then      gt  checkElement selector          else           return Promise resolve true            Or using generator functions async function checkElement selector        const querySelector   null      while  querySelector     null            await rafAsync            querySelector   document querySelector selector             return querySelector       Usage checkElement  body     use whichever selector you want  then  element    gt         console info element          Do whatever you want now the element is there

User · Answer

Another variation of Iftah  var counter   10  var checkExist   setInterval function       console log counter     counter--   if      the-canvas   length    counter     0        console log  by bye         clearInterval checkExist          200     Just in case the element is never shown  so we don t check infinitely

User · Answer

Here is a solution using observables   waitForElementToAppear elementId                                                   return Observable create function observer                                            var el ref                                                                    var f        gt                                                                      el ref   document getElementById elementId                                    if  el ref                                                                        observer next el ref                                                          observer complete                                                             return                                                                                                                                                  window requestAnimationFrame f                                                                                                                          f                                                                                                                                                                                                                               Now you can write  waitForElementToAppear elementId  subscribe el ref   gt  doSomethingWith el ref

User · Answer

If you want a generic solution using MutationObserver you can use this function     MIT Licensed    Author  jwilson8767         Waits for an element satisfying selector to exist  then resolves promise with the element     Useful for resolving race conditions         param selector     returns  Promise      export function elementReady selector      return new Promise  resolve  reject    gt        const el   document querySelector selector       if  el   resolve el        new MutationObserver  mutationRecords  observer    gt             Query for elements matching the specified selector       Array from document querySelectorAll selector   forEach  element    gt            resolve element             Once we have resolved we don t need the observer anymore          observer disconnect                            observe document documentElement            childList  true          subtree  true                     Source  https   gist github com jwilson8767 db379026efcbd932f64382db4b02853e Example how to use it  elementReady   someWidget   then  someWidget   gt  someWidget remove         Note  MutationObserver has a great browser support  https   caniuse com  feat mutationobserver  Et voil

User · Answer

Is better to relay in requestAnimationFrame than in a setTimeout  this is my solution in es6 modules and using Promises   es6  modules and promises      onElementReady js const onElementReady    element   gt      new Promise  resolve    gt        const waitForElement        gt          if   element            resolve  element           else           window requestAnimationFrame waitForElement                      waitForElement             export default onElementReady      in your app import onElementReady from    onElementReady    const  someElement   document querySelector   some-className    onElementReady  someElement     then      gt           your element is ready       plain js and promises   var onElementReady   function  element      return new Promise  resolve    gt        var waitForElement   function           if   element            resolve  element           else           window requestAnimationFrame waitForElement                      waitForElement             var  someElement   document querySelector   some-className    onElementReady  someElement     then      gt           your element is ready

User · Answer

You can check if the dom already exists by setting a timeout until it is already rendered in the dom   var panelMainWrapper   document getElementById  panelMainWrapper    setTimeout function waitPanelMainWrapper         if  document body contains panelMainWrapper                 panelMainWrapper   html data  fadeIn  fast          else           setTimeout waitPanelMainWrapper  10            10

User · Answer

A more modern approach to waiting for elements   while  document querySelector   my-selector        await new Promise r   gt  setTimeout r  500         now the element is loaded   Note that this code would need to be wrapped in an async function

User · Answer

Here s a minor improvement over Jamie Hutber s answer const checkElement   async selector   gt      while   document querySelector selector      null        await new Promise  resolve   gt   requestAnimationFrame resolve          return document querySelector selector        To use  checkElement   myElement   then  selector    gt      console log selector

User · Answer

If you have access to the code that creates the canvas - simply call the function right there after the canvas is created   If you have no access to that code  eg  If it is a 3rd party code such as google maps  then what you could do is test for the existence in an interval   var checkExist   setInterval function        if      the-canvas   length          console log  Exists           clearInterval checkExist           100      check every 100ms   But note - many times 3rd party code has an option to activate your code  by callback or event triggering  when it finishes to load  That may be where you can put your function   The interval solution is really a bad solution and should be used only if nothing else works

[javascript] Make function wait until element exists

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to function