Faire fonction d'attendre jusqu'à ce que l'élément existe

J'essaye d'ajouter une toile sur une autre toile – comment puis-je faire de cette fonction d'attendre pour commencer jusqu'à ce que la première toile est créé?

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;
    }

Lorsque vous créez la toile sur un clic, l'exécution de la fonction ou du déclenchement d'un événement qui s'exécute dans un gestionnaire qui exécute la fonction. il n'est pas intégré dans le cross-browser événement qui se produit lorsqu'un élément est disponible.
double possible de Comment faire pour attendre jusqu'à ce qu'un élément existe?

InformationsquelleAutor Steven | 2013-04-22

220

Si vous avez accès au code qui crée la toile, il suffit d'appeler la fonction à droite après que la toile est créé.

Si vous n'avez pas accès à ce code (par exemple. Si c'est une 3ème partie du code tel que google maps) alors ce que vous pourriez faire est de tester l'existence dans un intervalle:
```
var checkExist = setInterval(function() {
   if ($('#the-canvas').length) {
      console.log("Exists!");
      clearInterval(checkExist);
   }
}, 100); //check every 100ms
```
Mais remarque - de nombreuses fois 3ème partie du code a une option pour activer votre code (par rappel ou d'un événement de déclenchement) quand il a fini de charger. Que peut-être où vous pouvez placer votre fonction. L'intervalle solution est vraiment une mauvaise solution et doit être utilisé uniquement si rien d'autre ne fonctionne.
- J'ai utilisé setTimeout pour exécuter mon script après cliquez sur merci
- solution idéale pour une utilisation dans angularjs typeahead. Merci de me guider dans la bonne direction!
- Une excellente solution d'attendre quelque chose de créé par Ajax avant de mettre quelque chose d'autre là-dedans. Merci beaucoup.
- Comment puis-je obtenir que cela fonctionne si le sélecteur est une variable? Aussi, si c'est une identification ou un sélecteur de Classe aussi bien les changements. Parfois, il y a plusieurs éléments retournés lorsque je sélectionne avec une classe, et j'aurais besoin de trouver un moyen de passer d'un index pour le sélecteur de comprendre que l'on. Comment puis-je faire? Merci
- c'est une toute autre question et ne convient pas pour les commentaires de cette réponse. Je vous suggère de vous poser une nouvelle question, expliquez ce que vous avez essayé, quel est le problème, etc...
- Je préfère largement cette setTimeout si je suis en attente pour une valeur de changer
- Une chose est important de le mentionner lors de l'utilisation de la solution, vous devriez avoir ce morceau de code à l'intérieur d'une boucle for et de définir un nombre maximum de tentatives contre, si quelque chose va mal, vous ne finissent avec une infinité de boucle 🙂
InformationsquelleAutor Iftah

Selon le navigateur que vous avez besoin de soutien, il y a l'option de MutationObserver.

Quelque chose le long des lignes de ce qui devrait faire l'affaire:

//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. je n'ai pas testé ce code moi-même, mais c'est l'idée générale.

Vous pouvez facilement étendre cette mesure à rechercher seulement la partie du DOM qui a changé. Pour cela, utilisez le mutations argument, c'est un tableau de MutationRecord objets.

Aimé celui-ci. Je vous remercie.

InformationsquelleAutor damd

Cela ne fonctionne qu'avec les navigateurs modernes, mais je le trouve plus facile de simplement utiliser un then veuillez donc le test de la première, mais:

Code

function rafAsync() {
    return new Promise(resolve => {
        requestAnimationFrame(resolve); //faster than set time out
    });
}

function checkElement(selector) {
    if (document.querySelector(selector) === null) {
        return rafAsync().then(() => checkElement(selector));
    } else {
        return Promise.resolve(true);
    }
}

Ou en utilisant le générateur de fonctions

async function checkElement(selector) {
    const querySelector = document.querySelector(selector);
    while (querySelector === null) {
        await rafAsync()
    }
    return querySelector;
}

Utilisation

checkElement('body') //use whichever selector you want
.then((element) => {
     console.info(element);
     //Do whatever you want now the element is there
});

InformationsquelleAutor Jamie Hutber

16

Une approche plus moderne d'attente pour les éléments:
```
while(!document.querySelector(".my-selector")) {
  await new Promise(r => setTimeout(r, 500));
}
//now the element is loaded
```
Noter que ce code n'est besoin d'être enveloppé dans un fonction async.
- c'est assez chouette!
InformationsquelleAutor

Ici que d'une petite amélioration par rapport à Jamie Hutber la réponse de

const checkElement = async selector => {

while ( document.querySelector(selector) === null) {
    await new Promise( resolve =>  requestAnimationFrame(resolve) )
}

return document.querySelector(selector); };

InformationsquelleAutor wLc

Est mieux pour le relais dans requestAnimationFrame que dans un setTimeout. c'est ma solution dans l'es6 modules et à l'aide de Promises.

es6, des modules et des promesses:

//onElementReady.js
const onElementReady = $element => (
  new Promise((resolve) => {
    const waitForElement = () => {
      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(() => {
    //your element is ready
  }

plain js and promises:

var onElementReady = function($element) {
  return new Promise((resolve) => {
    var waitForElement = function() {
      if ($element) {
        resolve($element);
      } else {
        window.requestAnimationFrame(waitForElement);
      }
    };
    waitForElement();
  })
};

var $someElement = document.querySelector('.some-className');
onElementReady($someElement)
  .then(() => {
    //your element is ready
  });

Uncaught TypeError: Cannot read property 'then' of undefined
Je pense que j'ai manqué un retour... avant que de nouvelles Promesses.
C'est la bonne solution, beaucoup mieux que tous le Minuteur périodique à base de vérifications.
En fait, cela ne fonctionne pas dans sa forme actuelle. Si $someElement est initialement nulle (c'est à dire pas encore présent dans les DOM), puis vous passez cette valeur null (au lieu de le sélecteur CSS) pour votre onElementReady de la fonction et de l'élément ne sera jamais résolu. Au lieu de cela, passer le sélecteur CSS en tant que texte et essayer d'obtenir une référence à l'élément via .querySelector à chaque passage.
Cela a très bien fonctionné pour mon cas d'utilisation et semble une bonne solution pour moi. Merci

InformationsquelleAutor ncubica

Vous pouvez vérifier si le dom existe déjà par la fixation d'un délai d'attente jusqu'à ce qu'il est déjà rendu dans les dom.

var panelMainWrapper = document.getElementById('panelMainWrapper');
setTimeout(function waitPanelMainWrapper() {
    if (document.body.contains(panelMainWrapper)) {
        $("#panelMainWrapper").html(data).fadeIn("fast");
    } else {
        setTimeout(waitPanelMainWrapper, 10);
    }
}, 10);

InformationsquelleAutor Carmela

Vous devez vous connecter pour publier un commentaire.