js0014 发表于 2018-12-15 | 阅读次数: 字数统计: 205 | 阅读时长 ≈ 1 闭包来做动画的效果 12345678910111213141516171819202122232425262728293031323334353637383940414243444546<!DOCTYPE html><html><head> <title>Using a closure in a timer interval callback</title> <meta charset="utf-8"> <script src="../assert.js"></script> <link rel="stylesheet" type="text/css" href="../assert.css"> <style> #box1{ width: 100px; height: 100px; position: relative; margin:5; color: white; font-weight: bolder; background-color:blue; margin-bottom: 100px; } </style></head><body> <div id="box1">First 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("box1"); </script></body></html>