如果你想要一个通用的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 !：）

这是一种纯粹的基于承诺的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

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

您可以通过设置超时来检查dom是否已经存在，直到它已经在dom中呈现。

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

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

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

也许我有点晚了:)，但这里有一个很好的和简短的解决方案，由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建议的几个改进。

享受吧!