在前端开发中，有时候需要等待一个元素加载完毕后再进行后续的操作。这种情况下，我们就需要使用一些技巧来等待元素的出现。本文将介绍几种常见的方法，以及它们的优缺点和适用场景。
1. 定时器轮询
最简单的方法是使用定时器轮询。通过 setInterval 或 setTimeout 不断地检查元素是否已经存在，直到出现为止。例如：
-- -------------------- ---- -------
-------- ------------------------ --------- -
----- ---------- - -------------- -- -
----- ------- - ---------------------------------
-- --------- -
--------------------------
------------------
-
-- ------
-
------------------------- --------- -- -
---------------------- ---------
---这种方法的好处是代码简单易懂，适用于简单的场景。但是缺点也很明显，会不断地轮询浪费资源，而且无法处理元素动态删除和重新添加的情况。
2. MutationObserver 监听
MutationObserver 是一个 Web API，可以监听 DOM 的变化。当节点被添加或删除时，MutationObserver 可以触发回调函数。因此，我们可以通过监听根节点来判断目标元素是否存在。例如：
-- -------------------- ---- -------
-------- ------------------------ --------- -
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
----- ---------- - --------------------------------
-- --------------------- -- ------------ -- ------------------------ -
----------------------
----------------------------- -- ------------ -- -------------------------
-
---
---
------------------------------------------ - ---------- ----- -------- ---- ---
-
------------------------- --------- -- -
---------------------- ---------
---这种方法的好处是可以避免不必要的轮询，同时也能处理元素的动态添加和删除。但是，它的缺点是代码相对复杂，需要理解 MutationObserver 的工作原理。
3. Promise 包装
使用 Promise 来等待元素出现也是一种常见的方法。我们可以将定时器轮询和 MutationObserver 监听包装成 Promise，使代码更加简洁。例如：
-- -------------------- ---- -------
-------- ------------------------ -
------ --- ----------------- -- -
-- ---------------------------------- -
------------------------------------------
-------
-
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
----- ---------- - --------------------------------
-- --------------------- -- ------------ -- ------------------------ -
----------------------
---------------------------- -- ------------ -- -------------------------
-
---
---
------------------------------------------ - ---------- ----- -------- ---- ---
-------------- -- -
----- ------- - ---------------------------------
-- --------- -
----------------------
-----------------
-
-- ------
---
-
---------------------------------------- -- -
---------------------- ---------
---这种方法结合了前两种的优点，代码简洁且适用于各种场景。但是需要注意的是，由于 Promise 包装了异步操作，所以在使用 await 或 then 方法时需要注意错误处理。
总结
等待元素出现是前端开发中常见的问题，本文介绍了几种常用的方法：定时器轮询、MutationObserver 监听和 Promise 包装。不同方法的优缺点和适用场景也有所不同，具体应该根据实际情况选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9553
