Buat fungsi menunggu hingga elemen ada

Saya mencoba menambahkan kanvas di atas kanvas lain - bagaimana saya bisa membuat fungsi ini menunggu untuk memulai sampai kanvas pertama dibuat?

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

Jika Anda memiliki akses ke kode yang menciptakan kanvas - cukup panggil fungsi di sana setelah kanvas dibuat.

Jika Anda tidak memiliki akses ke kode itu (mis. Jika kode pihak ke-3 seperti google maps) maka yang dapat Anda lakukan adalah menguji keberadaannya dalam interval:

var checkExist = setInterval(function() {
   if ($('#the-canvas').length) {
      console.log("Exists!");
      clearInterval(checkExist);
   }
}, 100); // check every 100ms

Tetapi perhatikan - berkali-kali kode pihak ke-3 memiliki opsi untuk mengaktifkan kode Anda (dengan panggilan balik atau pemicu acara) ketika selesai memuat. Itu mungkin di mana Anda dapat menempatkan fungsi Anda. Solusi interval benar-benar solusi yang buruk dan harus digunakan hanya jika tidak ada yang berfungsi.

Bergantung pada browser mana yang Anda butuhkan untuk mendukung, ada opsi MutationObserver .

EDIT: Semua browser utama mendukung MutationObserver sekarang .

Sesuatu di sepanjang garis ini harus melakukan trik:

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

NB Saya belum menguji kode ini sendiri, tapi itu ide umum.

Anda dapat dengan mudah memperluas ini hanya untuk mencari bagian DOM yang berubah. Untuk itu, gunakan mutationsargumen, ini adalah array MutationRecordobjek.

Ini hanya akan berfungsi dengan peramban modern tetapi saya merasa lebih mudah untuk hanya menggunakan thenjadi silakan uji dulu tetapi:

Kode

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

Atau menggunakan fungsi generator

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

Pemakaian

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

Pendekatan yang lebih modern untuk menunggu elemen:

while(!document.querySelector(".my-selector")) {
  await new Promise(r => setTimeout(r, 500));
}
// now the element is loaded

Perhatikan bahwa kode ini harus dibungkus dengan fungsi async .

Ini sedikit perbaikan dari jawaban Jamie Hutber

const checkElement = async selector => {

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

return document.querySelector(selector); };

Lebih baik untuk menyampaikan requestAnimationFramedaripada dalam setTimeout. ini adalah solusi saya dalam modul ES6 dan menggunakanPromises .

es6, modul dan janji:

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

Berikut adalah solusi menggunakan yang bisa diamati.

waitForElementToAppear(elementId) {                                          

    return Observable.create(function(observer) {                            
            var el_ref;                                                      
            var f = () => {                                                  
                el_ref = document.getElementById(elementId);                 
                if (el_ref) {                                                
                    observer.next(el_ref);                                   
                    observer.complete();                                     
                    return;                                                  
                }                                                            
                window.requestAnimationFrame(f);                             
            };                                                               
            f();                                                             
        });                                                                  
}                                                                            

Sekarang kamu bisa menulis

waitForElementToAppear(elementId).subscribe(el_ref => doSomethingWith(el_ref);

Anda dapat memeriksa apakah dom sudah ada dengan mengatur batas waktu hingga dom diberikan di dalam dom.

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

Jika Anda menginginkan solusi umum menggunakan MutationObserver, Anda dapat menggunakan fungsi ini

// 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) => {
    const el = document.querySelector(selector);
    if (el) {resolve(el);}
    new MutationObserver((mutationRecords, observer) => {
      // Query for elements matching the specified selector
      Array.from(document.querySelectorAll(selector)).forEach((element) => {
        resolve(element);
        //Once we have resolved we don't need the observer anymore.
        observer.disconnect();
      });
    })
      .observe(document.documentElement, {
        childList: true,
        subtree: true
      });
  });
}

Sumber: https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e
Contoh cara menggunakannya

elementReady('#someWidget').then((someWidget)=>{someWidget.remove();});

Catatan: MutationObserver memiliki dukungan browser yang hebat; https://caniuse.com/#feat=mutationobserver

Dan lagi! :)

Variasi lain dari 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);

Kalau-kalau elemen tidak pernah ditampilkan, jadi kami tidak memeriksa tanpa batas.