<div id="box"></div>
    <script>
    function animateIt(elementId) {
    var elem = document.getElementById(elementId);             
    var tick = 0;
    var timer = setInterval(function(){                        
    if (tick < 100) {
    elem.style.left = elem.style.top = tick + "px";
    tick++;
    }
    else {
    clearInterval(timer);
    assert(tick == 100,                                      
    "Tick accessed via a closure.");
     assert(elem,
           "Element also accessed via a closure.");
     assert(timer,
           "Timer reference also obtained via a closure." );
      }
      }, 10);
      }
      animateIt('box');                                             
     </script>
    
    

Closures, Elements, Animations and Timers

Assertion Testing

<script>
function assert(value, desc) {
var resultsList = document.getElementById("results");
if (!resultsList) {
resultsList = document.createElement('ul');
document.getElementsByTagName('body')[0].appendChild(resultsList);
resultsList.setAttribute('id','results');
}
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
resultsList.appendChild(li);
}
</script>

<style>
ul#results {
	border: 2px ridge maroon;
	background-color: #ffffcc;
	padding: 0.25em 1.5em;
	margin-left: 0;
}
li.pass {
	color: #006400;
}
li.fail {
	color: #dc143c;
	text-decoration: line-through;
}
</style>