Skip to content

Instantly share code, notes, and snippets.

@911992

911992/js_event_dispatch_blocking_test.html

Created December 9, 2020 23:45
Show Gist options
  • Save 911992/fc49d30299b3702ebebb7811bfa1abe3 to your computer and use it in GitHub Desktop.
Save 911992/fc49d30299b3702ebebb7811bfa1abe3 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Async Event Handling Example
Raw
js_event_dispatch_blocking_test.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 = 1024;
var async_check = document.getElementById("asyncc");
canvas.addEventListener("mousemove",function(evt){
console.log("mouse move evnt, x:"+evt.x + " , y:"+evt.y+ " busy: "+busy);
if(busy){
return;
}
busy = true;
if(async_check.checked){
setTimeout(function(){paint_dot(evt)},1);
}else{
paint_dot(evt);
}
});
document.getElementById("clsbtn").addEventListener("click",clear);
function paint_dot(evt){
busy = true;
if(DELAY){
for(var a =0 ;a <loop_c;a++){
var e = document.createElement("span");
e.innerHTML = a+"--";
hidc.appendChild(e);
e.parentNode.removeChild(e);
}
}
g2.fillStyle = "#000000";
g2.fillRect(evt.x*pixel_r,evt.y*pixel_r,3*pixel_r,3*pixel_r);
busy = false;
}
function clear(){
console.log("clearing");
g2.fillStyle = "#ffffff";
g2.fillRect(0,0,canvas.width,canvas.height);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment