javascript - 窗口间隔 - 检查页面上的元素然后 append 到它

Question

我试图在 jQuery 周围封装一些代码，这些代码将不断检查页面上的元素，当该元素存在时，向其 append 一个已定义的变量。在本例中，我正在寻找具有唯一 ID 的特定 div 并尝试 append 已定义的 iframe。这就是我所拥有的。

window.myInterval = setInterval(function() {
  $('#thankyou-container').append(iframehtml);
clearInterval(window.myInterval);
  }
), 50);

更新:

这是我尝试插入到 #thankyou-container 中但在页面加载后加载的代码。我遇到的问题是，此广告代码(如下)仅在我刷新浏览器时加载到页面上。很奇怪，它没有立即显示:

<script type="text/javascript">
vm_load({
"displayId": "12584",
"publisherId": "33927",
"campaign": "9380",
"maxResults": "3",
"areaofstudy":
JSON.parse(jQuery.cookie('CategorySubCategorySpecialty')).CATEGORIES[0].text.replace('Business','1').replace('Criminal Justice & Legal','3').replace('Education','5').replace('Fine Arts & Design','2').replace('Health & Medicine','8').replace('Liberal Arts & Humanities','5').replace('Math, Science & Engineering','9').replace('Public Affairs & Social Sciences','13').replace('Religious Studies','5').replace('Technology','9').replace('Vocational Training',''),
"md": "1"
});
</script>

在页面上加载 jQuery，并在此代码之前加载引用 vm_load 函数的 javascript 文件。

我想我需要一些东西来包装代码并告诉它在页面加载完成后加载。这可能是解决方案吗？

Answer 1

这应该可以解决您的问题...

window.myInterval = setInterval(function() {
    var $container = $('#thankyou-container');
    if ($container.length) {
        clearInterval(window.myInterval);
        $container.append(iframehtml);
    }
), 50);

它将检查该元素是否存在。如果没有，什么也不会发生。如果是，则清除间隔并执行追加操作。

但是，我建议采用这种方法......

function containerAppend() {
    var $container = $('#thankyou-container');
    if ($container.length) {
        $container.append(iframehtml);
    }
    else {
        setTimeout(containerAppend, 50);
    }
}
containerAppend();

它有点复杂，但它使用超时而不是间隔，以便它考虑到任何需要时间的事情。使用原始方法，您可能会发现元素搜索花费的时间超过 50ms，这可能会导致问题。