const observer = new MutationObserver(() => {
const addedNodesCount = Array.from(container.childNodes).filter(
node => node.className === 'node',
).length;
if (addedNodesCount === nodes.length) {
waitForLayout(
() => {
renderEdges();
},
() => {
const firstNode = container.childNodes[0];
return firstNode && firstNode.offsetWidth > 0;
},
);
observer.disconnect();
}
});
observer.observe(container, { childList: true, attributes: true });
function waitForLayout(callback, check) {
if (check()) {
callback();
} else {
requestAnimationFrame(() => {
waitForLayout(callback, check);
});
}
}
主要是三个函数 , 第一个new MutationObserver 监听
第二个 递归判断浏览器是否已经渲染上了 , 通过check函数实现g
最后是requestAnimationFrame这个会在每次浏览器重绘之间进行监听