911992/js_event_dispatch_blocking_test1.html

## js_event_dispatch_blocking_test1.html
<!DOCTYPE html>

<!--
Created on Dec 9, 2020 at 2:53 PM -0800
https://github.com/911992
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body style="margin: 0px;padding: 0px">
        <div style="position: absolute;right:0;border: 1px solid gray;background-color: bisque;z-index: 911">
            <div id="hid" style="display: none"></div>
            Async call?<input id="asyncc" type="checkbox" checked="checked"/><br/>
            <button id="clsbtn">clear</button>
        </div>
        <div id="container" style="position: absolute;width: 100%;height: 100%">
            <canvas id="canvas" style="width: 100%;height: 100%">

            </canvas>
        </div>
        <script>
            var pixel_r = window.devicePixelRatio;
            var container = document.getElementById("container");
            var hidc = document.getElementById("hid");
            var w = container.scrollWidth;
            var h = container.scrollHeight;
            var canvas = document.getElementById("canvas");
            var g2 = canvas.getContext("2d");
            canvas.width = w * pixel_r;
            canvas.height = h * pixel_r;
            const DELAY = true;
            var busy = false;
            var loop_c = 255;
            var async_check = document.getElementById("asyncc");
            var stop;
            var wait_time = 10;
            var queued_evt = null;
            canvas.addEventListener("click", function (evt) {
                evt.preventDefault();
                console.log("mouse click evnt, x:" + evt.x + " , y:" + evt.y + " busy: " + busy);
                var cpe = {x:evt.x,y:evt.y};
//                Object.assign(cpe, evt);
                if (busy) {
                    console.log("Oh busy, setting queued_evt");
                    queued_evt = cpe;
                    return;
                }
                busy = true;
                if (async_check.checked) {
                    setTimeout(function () {
                        paint_dot(cpe)
                    }, 1);
                } else {
                    paint_dot(evt);
                }

            });
            document.getElementById("clsbtn").addEventListener("click", clear);
            async function paint_dot(evt) {
                busy = true;
                var x , a , m=0;
                if (DELAY) {
                    clear();
                    g2.fillStyle = "#000000";
                    var step = 4;
                    for (x = 0; x < canvas.width && queued_evt == null; x = x + step) {//hard to interupt this
                        for (a = 0; a < loop_c && queued_evt == null; a++) {//hard to interrupt this
                            var e = document.createElement("span");
                            e.innerHTML = a + "--";
                            hidc.appendChild(e);
                            m = m + hidc.childNodes.length;
                            e.parentNode.removeChild(e);
//                            wait();
                        }
                        g2.fillRect(x * pixel_r, evt.y * pixel_r, 2 * pixel_r, 2 * pixel_r);
                    }
                }
                console.log("x: " + x + " a: " + a + "m: "+m);
                if (queued_evt != null) {
                    console.log("going for queued_evt");
                    var cp = queued_evt;
                    queued_evt = null;
                    paint_dot(cp);
                    return;
                } else {
                    console.log("Hoor! queued_evt is null");
                }
                busy = false;
            }
            function wait_ex() {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve('resolved');
                    }, wait_time);
                });
            }
            async function wait() {
                const result = await wait_ex();
            }
            function clear() {
                console.log("clearing");
                g2.fillStyle = "#ffffff";
                g2.fillRect(0, 0, canvas.width, canvas.height);
            }
        </script>
    </body>
</html>
	<!DOCTYPE html>

	<!--
	Created on Dec 9, 2020 at 2:53 PM -0800
	https://github.com/911992
	-->
	<html>
	<head>
	<title>TODO supply a title</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body style="margin: 0px;padding: 0px">
	<div style="position: absolute;right:0;border: 1px solid gray;background-color: bisque;z-index: 911">
	<div id="hid" style="display: none"></div>
	Async call?<input id="asyncc" type="checkbox" checked="checked"/><br/>
	<button id="clsbtn">clear</button>
	</div>
	<div id="container" style="position: absolute;width: 100%;height: 100%">
	<canvas id="canvas" style="width: 100%;height: 100%">

	</canvas>
	</div>
	<script>
	var pixel_r = window.devicePixelRatio;
	var container = document.getElementById("container");
	var hidc = document.getElementById("hid");
	var w = container.scrollWidth;
	var h = container.scrollHeight;
	var canvas = document.getElementById("canvas");
	var g2 = canvas.getContext("2d");
	canvas.width = w * pixel_r;
	canvas.height = h * pixel_r;
	const DELAY = true;
	var busy = false;
	var loop_c = 255;
	var async_check = document.getElementById("asyncc");
	var stop;
	var wait_time = 10;
	var queued_evt = null;
	canvas.addEventListener("click", function (evt) {
	evt.preventDefault();
	console.log("mouse click evnt, x:" + evt.x + " , y:" + evt.y + " busy: " + busy);
	var cpe = {x:evt.x,y:evt.y};
	// Object.assign(cpe, evt);
	if (busy) {
	console.log("Oh busy, setting queued_evt");
	queued_evt = cpe;
	return;
	}
	busy = true;
	if (async_check.checked) {
	setTimeout(function () {
	paint_dot(cpe)
	}, 1);
	} else {
	paint_dot(evt);
	}

	});
	document.getElementById("clsbtn").addEventListener("click", clear);
	async function paint_dot(evt) {
	busy = true;
	var x , a , m=0;
	if (DELAY) {
	clear();
	g2.fillStyle = "#000000";
	var step = 4;
	for (x = 0; x < canvas.width && queued_evt == null; x = x + step) {//hard to interupt this
	for (a = 0; a < loop_c && queued_evt == null; a++) {//hard to interrupt this
	var e = document.createElement("span");
	e.innerHTML = a + "--";
	hidc.appendChild(e);
	m = m + hidc.childNodes.length;
	e.parentNode.removeChild(e);
	// wait();
	}
	g2.fillRect(x * pixel_r, evt.y * pixel_r, 2 * pixel_r, 2 * pixel_r);
	}
	}
	console.log("x: " + x + " a: " + a + "m: "+m);
	if (queued_evt != null) {
	console.log("going for queued_evt");
	var cp = queued_evt;
	queued_evt = null;
	paint_dot(cp);
	return;
	} else {
	console.log("Hoor! queued_evt is null");
	}
	busy = false;
	}
	function wait_ex() {
	return new Promise(resolve => {
	setTimeout(() => {
	resolve('resolved');
	}, wait_time);
	});
	}
	async function wait() {
	const result = await wait_ex();
	}
	function clear() {
	console.log("clearing");
	g2.fillStyle = "#ffffff";
	g2.fillRect(0, 0, canvas.width, canvas.height);
	}
	</script>
	</body>
	</html>