1. ホーム
  2. ジャバスクリプト

[解決済み】要素が存在するまで関数を待機させる

2022-04-04 21:15:59

質問

キャンバスを別のキャンバスの上に追加したいのですが、最初のキャンバスが作成されるまでこの関数を待機させるにはどうすればよいですか?

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

解決方法は?

キャンバスを作成するコードにアクセスできる場合は、キャンバスが作成された後、その場で関数を呼び出すだけでよいです。

そのコードにアクセスできない場合(例:Googleマップのようなサードパーティのコードの場合)、ある間隔で存在するかどうかをテストすることができます。

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

しかし、多くの場合サードパーティのコードは、ロードが終了したときにあなたのコードを(コールバックやイベントトリガーによって)アクティブにするオプションを持っていることに注意してください。そこにあなたの関数を置くことができるかもしれません。 インターバルの解決策は本当に悪い解決策で、他に何も機能しない場合にのみ使用されるべきものです。