JSFiddle - React, Tailwind, and code Playground

by seong gyun jeon

JavaScript

(function(){
        
        // 아래 JS 코드는 "비동기 이벤트" 코드 블록이 아니므로 큐에 쌓이지 않으며, Blocking 또한 되지 않는다.
        for (var i = 0; i < 10000; i++){
            console.log('javascript block');
        }
                
        // 첫 번째 비동기 이벤트(load)
        this.onload = function(){
            
            console.log('load eventhandler block queue1');
            
            // 두 번째 비동기 이벤트(click)
            this.onclick = function(){
                
                console.log('click event handler block  queue2=' + new Date().getTime());
                
                // 세 번째 비동기 이벤트(timeout)
                this.setTimeout(function(){
                    for (var i = 0; i < 10; i++){
                        console.log('timout event block  queue3=' + new Date().getTime());
                    }
                }, 1);
                
                var args = arguments;
                
                // 네 번째 비동기 이벤트(interval)
                args.callee.timer1 = this.setInterval(function(){
                    for (var i = 0; i < 100; i++){
                        console.log('inerval event block queue4=' + new Date().getTime());
                    }
                    // inerval 타이머 이벤트를 종료 시킨다.
                    this.clearInterval(args.callee.timer1);
                }, 1);
                
                // 다섯 번째 비동기 이벤트(interval)
                args.callee.timer2 = this.setInterval(function(){
                    for (var i = 0; i < 10; i++){
                        console.log('inerval event block queue5=' + new Date().getTime());
                    }
                    this.clearInterval(args.callee.timer2);
                }, 1);
            }
        }
    })();