ResizeObserverで無限ループしちゃった話

　このコードは実行しないでください。無限ループに陥りフリーズします。

コード

<script>
window.addEventListener('DOMContentLoaded', (event) => {
    window.addEventListener('resize', (event)=>{message('resize')});
    new ResizeObserver(()=>{message('ResizeObserver')}).observe(document.body)
    function message(msg) { document.body.innerHTML += `${msg}<br>${document.body.innerHTML}` }
});
</script>

　しつこいようですが、実行しないでください。無限ループに陥りフリーズします。フリではありません。実行するなよ？　絶対するなよ？

リーディング

　え〜、なんで無限ループになったの？　と思って考えてみました。

　まず最初にindex.htmlを開くとResizeObserverが一回実行され、その中の処理innerHTMLでテキストが追加されます。そしたらサイズが変更されるので、またイベントが発火します。あとはその繰り返しで無限ループになったのかな〜と。

なんでこんなコード書いたの？

　バカなの？

　いや、違うんです。前回、resize／ResizeObserverについて色々検証したかったので、一緒にできたほうが楽だな〜と思って横着したら、こうなりました。

　あと、console.logを使うとデベロッパツールを開くことになり、リサイズイベントの発火が正確に確認できないかもと思ってinnerHTMLにしたのです。

　皆さんもやりません？　やりますよね？　……私だけ？　またまたぁ〜