nzakas/ButtonDelayDemo.htm

## ButtonDelayDemo.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Button Example</title>

<link rel="stylesheet" type="text/css" href="yui/fonts/fonts-min.css" />


</head>

<body class=" yui-skin-sam">


<h1>Button Example</h1>

<p>In this example, each button has an <code>onclick</code> event handler that takes a different amount of time to complete..
Note that the button's visual state doesn't change from the down state until the event handler is finished.</p>

<p><button id="btn1" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (no delay)</p>
<p><button id="btn2" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (50 ms)</p>
<p><button id="btn3" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (100 ms)</p>
<p><button id="btn4" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (200 ms)</p>
<p><button id="btn5" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (500 ms)</p>
<p>Based on work by <a href="http://www.almaer.com/blog/">Dion Almaer</a> and <a href="http://weblogs.java.net/blog/javaben/">Ben Galbraith</a>.</p>
<script type="text/javascript">
    window.onload = function(){

        document.getElementById("btn1").onclick = function(){
            //nothing

        };

        document.getElementById("btn2").onclick = function(){
            var now = new Date();
            while((new Date()) - now < 50){
            }

        };

        document.getElementById("btn3").onclick = function(){
            var now = new Date();
            while((new Date()) - now < 100){
            }

        };

        document.getElementById("btn4").onclick = function(){
            var now = new Date();
            while((new Date()) - now < 200){
            }

        };

        document.getElementById("btn5").onclick = function(){
            var now = new Date();
            while((new Date()) - now < 500){
            }

        };


    };
</script>

</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>


	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Button Example</title>

	<link rel="stylesheet" type="text/css" href="yui/fonts/fonts-min.css" />


	</head>

	<body class=" yui-skin-sam">


	<h1>Button Example</h1>

	<p>In this example, each button has an <code>onclick</code> event handler that takes a different amount of time to complete..
	Note that the button's visual state doesn't change from the down state until the event handler is finished.</p>

	<p><button id="btn1" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (no delay)</p>
	<p><button id="btn2" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (50 ms)</p>
	<p><button id="btn3" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (100 ms)</p>
	<p><button id="btn4" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (200 ms)</p>
	<p><button id="btn5" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> (500 ms)</p>
	<p>Based on work by <a href="http://www.almaer.com/blog/">Dion Almaer</a> and <a href="http://weblogs.java.net/blog/javaben/">Ben Galbraith</a>.</p>
	<script type="text/javascript">
	window.onload = function(){

	document.getElementById("btn1").onclick = function(){
	//nothing

	};

	document.getElementById("btn2").onclick = function(){
	var now = new Date();
	while((new Date()) - now < 50){
	}

	};

	document.getElementById("btn3").onclick = function(){
	var now = new Date();
	while((new Date()) - now < 100){
	}

	};

	document.getElementById("btn4").onclick = function(){
	var now = new Date();
	while((new Date()) - now < 200){
	}

	};

	document.getElementById("btn5").onclick = function(){
	var now = new Date();
	while((new Date()) - now < 500){
	}

	};


	};
	</script>

	</body>
	</html>