如果您有权访问创建画布的代码 - 只需在创建画布后立即调用该函数即可。

如果您无法访问该代码（例如，如果它是 3rd 方代码，例如谷歌地图），那么您可以做的是在某个时间间隔内测试是否存在：

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

但请注意 - 很多时候 3rd 方代码可以选择在完成加载时激活您的代码（通过回调或事件触发）。那可能是您可以放置​​函数的地方。间隔解决方案确实是一个糟糕的解决方案，只有在其他方法都不起作用时才应该使用。

根据您需要支持的浏览器，有MutationObserver选项。

编辑：所有主要浏览器现在都支持 MutationObserver。

与此类似的事情应该可以解决问题：

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

注意我自己还没有测试过这段代码，但这是一般的想法。

您可以轻松地将其扩展为仅搜索更改的 DOM 部分。为此，使用mutations参数，它是一个MutationRecord对象数组。

这仅适用于现代浏览器，但我发现使用 a 更容易，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
});

一种更现代的等待元素的方法：

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

请注意，此代码需要包含在异步函数中。

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

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