Question

我正在尝试制作一个将虚拟货币发送给另一个用户的机器人。我通过数据库为用户搜索机器人。在搜索之前，分区的内部html根本没有元素。搜索之后，它会被多个用户链接填充。

因为结果显示需要一段时间，我需要Javascript等待至少一个锚标记存在。我怎么能这样做？

Answer 1

使用onload事件，您可以使用带有标记a的onload。 EX：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_onload

Answer 2

我猜这是一个AJAX电话。

您可以使用AJAX callback来检查您是否从服务器获得任何结果。

这样的事情：

var tags_available = false;
$.ajax({
   ... the ajax stuff;
}).done(function(data){ // The callback
  if(data || $('#tags_element').lenght != 0){
    tags_available = true;
  }else{
    tags_available = false;
  }
})

然后：

if(tags_available){
  console.log("Tags available")
}

Answer 3

如果我理解正确，您需要检查dom元素是否已更新/填充了新元素。有几种方法可以实现这一目标：

1。）使用window.setTimeout函数

function checkForChanges() {
  var observeThis = document.getElementById('observethis');
  if (observeThis.hasChildNodes()) {
    alert('yes');
    return;
    /*this is gonna execute only once */
  }
  window.setTimeout(function() {
    checkForChanges();
  }, 25);
}

checkForChanges();

/* this part is only relevant for demonstration. 
It shows what happens when dom element gets new child */
(function() {
  var observeThis = document.getElementById('observethis');
  var button = document.getElementById('button-append');
  button.addEventListener('click', function() {
    var anchorElement = document.createElement('a');
    anchorElement.href = "http://example.com";
    anchorElement.target = "_blank";
    anchorElement.innerHTML = "Link";
    observeThis.appendChild(anchorElement);
  }, false);
})();

<div id="observethis"></div>
<button id="button-append">append anchor</button>

2。）MutationObserver类

这是现代方法（我也会说推荐的方法）。

function checkForChanges() {
  var observeThis = document.getElementById('observethis');
  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        alert("insert your own code");
      }
    });
  });
  var config = {
    attributes: true,
    childList: true,
    characterData: true
  };
  observer.observe(observeThis, config);
  //observer.disconnect(); 
  //use observer.disconnect to end observations
}

checkForChanges();

/* this part is only relevant for demonstration. 
It shows what happens when dom element gets new child */
(function() {
  var observeThis = document.getElementById('observethis');
  var button = document.getElementById('button-append');
  button.addEventListener('click', function() {
    var anchorElement = document.createElement('a');
    anchorElement.href = "http://example.com";
    anchorElement.target = "_blank";
    anchorElement.innerHTML = "Link";
    observeThis.appendChild(anchorElement);
  }, false);
})();

<div id="observethis"></div>
<button id="button-append">Append Child</button>

阅读有关MutationObserver here

的更多信息

3.。）如果您只是等待从ajax回调中获得响应，并且实际上不需要观察dom中的更改，那么只需使用XMLHttpRequest即可。甚至更好。使用新的javascript fetch API（您需要polyfill才能确保它在大多数浏览器中都有效）

Answer 4

有许多更好的方法可以做到这一点，所有这些都源于实际检查AJAX数据何时填充元素本身，但以下内容将起作用：

var t = setInterval(function () {
  if ($("element").children().length > 0) {
    clearInterval(t);
    // do stuff
  }
}, 50);

Answer 5

使用setTimeout（）将代码延迟几秒是有风险的，因为在较旧的浏览器/机器上，它可能需要比预期更长的时间。

请改用promise（），您可以找到文档https://api.jquery.com/promise/。

使Javascript等待HTML元素存在

5 个答案: