public
Created

  • Download Gist
ButtonDelayDemo.htm
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.