davidsierradz/event-loop.html

## event-loop.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Don't block the event loop</title>
    </head>
    <body>
        <div id="root"></div>
        <script>
            const asyncLoop = (i, root, arr) => {
                const element = document.createElement('div');
                element.innerHTML = `<p>${arr[i]}</p>`;
                root.appendChild(element);

                if (i < arr.length - 1) {
                    setTimeout(() => {
                        asyncLoop(++i, root, arr);
                    }, 0);
                }
            };

            document.addEventListener('DOMContentLoaded', () => {
                const root = document.getElementById('root');
                asyncLoop(0, root, [...Array(100).keys()]);
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Don't block the event loop</title>
	</head>
	<body>
	<div id="root"></div>
	<script>
	const asyncLoop = (i, root, arr) => {
	const element = document.createElement('div');
	element.innerHTML = `<p>${arr[i]}</p>`;
	root.appendChild(element);

	if (i < arr.length - 1) {
	setTimeout(() => {
	asyncLoop(++i, root, arr);
	}, 0);
	}
	};

	document.addEventListener('DOMContentLoaded', () => {
	const root = document.getElementById('root');
	asyncLoop(0, root, [...Array(100).keys()]);
	});
	</script>
	</body>
	</html>