这是一种纯粹的基于承诺的JavaScript方法，您可以知道需要等待多少毫秒。

    const waitElementFor = function(query, ms = 3000) { // 3000 === 3 seconds
        return new Promise((resolve) => {
            var waited = 0;
            var el = null;
            var wi = setInterval(function() {
                el = document.querySelector(query);
                if (waited >= ms || el) {
                    clearInterval(wi);
                    if(el) {
                        resolve(el);
                    } else {
                        resolve(null);
                    }
                }
                waited += 10;
            }, 10);  
        });
    }

要使用该函数，只需在异步函数中使用以下代码。

var element = await waitElementFor('#elementID');

代码片段:

const waitElementFor = function(query, ms = 3000) { // 3000 === 3 seconds return new Promise((resolve) => { var waited = 0; var el = null; var wi = setInterval(function() { el = document.querySelector(query); if (waited >= ms || el) { clearInterval(wi); if(el) { resolve(el); } else { resolve(null); } } waited += 10; }, 10); }); } async function snippetTestAyncFunction(){ var element = await waitElementFor('#elementID'); console.log(element); } snippetTestAyncFunction();

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

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

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

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

根据您需要支持的浏览器，可以选择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中发生更改的部分。为此，使用突变参数，它是MutationRecord对象的数组。

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

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

注意，这段代码需要包装在一个异步函数中。

如果你想要一个通用的MutationObserver解决方案，你可以使用这个函数

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

来源:https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e 如何使用它的例子

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

注意:MutationObserver有很好的浏览器支持;https://caniuse.com/#feat=mutationobserver

voila !：）

在requestAnimationFrame中中继比在setTimeout中更好。这是我在es6模块和使用承诺的解决方案。

Es6、模块和承诺:

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

纯js和承诺:

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