等到元素可见 JavaScript

在前端开发中，我们经常需要等待某些元素的出现或消失。比如，在页面加载完成后，我们需要等待某个按钮的出现，然后才能执行相应的操作。这时候，我们就需要使用 JavaScript 来等待元素的可见性。

等待元素可见的方法

1. 使用 setTimeout

setTimeout 可以用来延迟函数的执行时间。代码如下：

setTimeout(function() {
  // 等待元素可见之后的操作
}, 1000);

这个代码片段会等待 1 秒（1000 毫秒），之后执行函数里面的操作。但是，这种方法不够灵活，因为如果元素出现的时间不确定，可能会导致代码执行过早或过晚。

2. 使用 setInterval

setInterval 可以在一定的时间间隔内反复执行代码。代码如下：

var intervalId = setInterval(function() {
  if (document.getElementById('myElement')) {
    clearInterval(intervalId);
    // 等待元素可见之后的操作
  }
}, 100);

这个代码片段会间隔 100 毫秒检查一次元素是否出现，如果出现了就会清除定时器并执行函数里面的操作。

3. 使用 MutationObserver

MutationObserver 是一个可以观察 DOM 变化的 API。代码如下：

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.target.id === 'myElement') {
      observer.disconnect();
      // 等待元素可见之后的操作
    }
  });    
});

observer.observe(document.body, { childList: true, subtree: true });

这个代码片段会观察到 DOM 的变化，并且在发现目标元素出现后，停止观察并执行函数里面的操作。

总结

这篇文章介绍了 JavaScript 中三种等待元素可见的方法：setTimeout、setInterval 和 MutationObserver。这些方法都有各自的优缺点，程序员应该根据具体情况选择最合适的方法。