Async callbacks in a nutshell

asyncTest.js

(function () {
    const LIMIT = 5;
    const bcA = new BroadcastChannel('id');
    const bcB = new BroadcastChannel('id');
	
    let flag = false, count = 0;

    bcA.onmessage = () => {
        console.log('(。_＋)＼BroadcastChannel');
    };
	
    bcB.postMessage('')

    window.requestIdleCallback(() => {
        console.log('(◎益◎;)requestIdleCallback');
    });

    onmessage = function () {
        console.log('(￣(エ)￣)ゞ onmessage');
    };
    postMessage(location.href);

    setTimeout(() => {
        flag = true;
        console.log(`(▰˘︹˘▰)setTimeout`);
    }, 0);

    const id = setInterval(() => {
        flag = true;
        console.log(`(*｀Ω´*)setInterval`);
        clearInterval(id);
    }, 0);

    task();
    window.requestAnimationFrame(() => {
        console.log('( ⚆ _ ⚆ )requestAnimationFrame');
    });

    function task() {
        queueMicrotask(() => {
            if (count < LIMIT && !flag) {
                count++;
                console.log(`╭( ･ㅂ･) I'm queueMicrotask, you're stuck`);
                task();
            } else {
                count = 0;
                promiseTask();
            }
        });
    }

    function promiseTask() {
        new Promise((resolve) => {
            resolve();
        }).then(() => {
            if (count < LIMIT && !flag) {
                count++;
                console.log(`o(〃＾▽＾〃)o') I'm Promise, you're stuck`);
                promiseTask();
            }
        });
    }
})();