如果你有权限访问创建画布的代码，只需在画布创建后调用函数即可。

如果您无法访问该代码(例如。如果它是第三方代码，如谷歌maps)，那么你可以做的是在一个区间内测试是否存在:

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

但注意-很多时候第三方代码有一个选项来激活你的代码(通过回调或事件触发)当它完成加载。你可以把函数放在这里。区间解实际上是一个糟糕的解，只有在其他方法都不起作用的情况下才应该使用。

只需使用递归的setTimeOut:

waitUntilElementIsPresent(callback: () => void): void {
    if (!this.methodToCheckIfElementIsPresent()) {
        setTimeout(() => this.waitUntilElementIsPresent(callback), 500);
        return;
    }
    callback();
}

用法:

this.waitUntilElementIsPresent(() => console.log('Element is present!'));

您可以限制尝试次数，因此当元素在限制之后不存在时将抛出错误:

waitUntilElementIsPresent(callback: () => void, attempt: number = 0): void {
    const maxAttempts = 10;
    if (!this.methodToCheckIfElementIsPresent()) {
        attempt++;
        setTimeout(() => this.waitUntilElementIsPresent(callback, attempt), 500);
        return;
    } else if (attempt >= maxAttempts) {
        return;
    }
    callback();
}

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

以防元素从未显示，所以我们不进行无限检查。

也许我有点晚了:)，但这里有一个很好的和简短的解决方案，由chrisjhoughton，它允许执行回调函数当等待结束。

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

如果你需要将参数传递给回调函数，你可以这样使用它:

waitForEl("#" + elDomId, () => callbackFunction(param1, param2));

但是要小心!默认情况下，这个解决方案会陷入一个无限循环的陷阱。

在GitHub线程中还提供了对topicstarter建议的几个改进。

享受吧!

这只适用于现代浏览器，但我发现它更容易使用一个then，所以请先测试，但是:

ES5

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

ES6

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

使用

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

这是对杰米·哈伯的回答的一个小小的改进

const checkElement = async selector => {
  while ( document.querySelector(selector) === null) {
    await new Promise( resolve =>  requestAnimationFrame(resolve) )
  }
  return document.querySelector(selector); 
};

使用方法:

checkElement('.myElement').then((selector) => {
  console.log(selector);
});