关于作用域的问题求教！！！

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 {width:200px;height:200px;background: red;position:absolute;top:50px;} </style> <script type="text/javascript"> var timer=""; function startMove(){ var oDiv=document.getElementById('div1'); var oBtn=document.getElementById('btn1'); var speed=10; clearInterval(timer); timer=setInterval(function(){ oDiv.style.left=oDiv.offsetLeft+speed+"px" },30) } </script> </head> <body> <input type="button" id="btn1" onclick="startMove()" > <div id="div1"></div> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 {width:200px;height:200px;background: red;position:absolute;top:50px;} </style> <script type="text/javascript"> function startMove(){ var oDiv=document.getElementById('div1'); var oBtn=document.getElementById('btn1'); var speed=10; var timer=""; clearInterval(timer); timer=setInterval(function(){ oDiv.style.left=oDiv.offsetLeft+speed+"px" },30) } </script> </head> <body> <input type="button" id="btn1" onclick="startMove()" > <div id="div1"></div> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 {width:200px;height:200px;background: red;position:absolute;top:50px;} </style> <script type="text/javascript"> var oDiv=document.getElementById('div1'); var oBtn=document.getElementById('btn1'); var speed=10; var timer=""; function startMove(){ clearInterval(timer); timer=setInterval(function(){ oDiv.style.left=oDiv.offsetLeft+speed+"px" },30) } </script> </head> <body> <input type="button" id="btn1" onclick="startMove()" > <div id="div1"></div> </body> </html>

第一个问题：此情况下点击buttn次数越多 div速度越快，，请问为什么？？ timer在里面在外面有区别吗？速度愈来愈快的原因是定时器同一时间内叠加的效果，就是30ms 内有多个定时器（回调函数）在执行。timer在外面是全局变量，每次点击不会重新声明，那么 clearInterval(timer) 就能够起作用，从而清除上一个定时器timer在里面是局部变量，每次点击重新声明，timer 还没被赋值，就被 clearInterval(timer)，那么这个 clearInterval(timer)并不会清除掉定时器，导致同一时刻多个定时器同时存在，盒子移动的越来越快。第二个问题：在这种情况下会报错，，但是为什么。。我定义的那些odiv obtn之类的不是全局变量吗？为什么会报错？？这是加载顺序的问题，脚本放到 <head> 中，所以执行要先于 <body> 中的DOM渲染，导致并不能取到那个 <div> 元素，所以一直都是 null。改进的办法是用 window.onload = function () { // 你的代码 }包括一下，等到窗口加载完成，也就是页面完全渲染出来之后执行，那么就可以取到 <div>了。或者是放到 </body> 结束标签的前面也是可以的，就是保证DOM先渲染，然后再操作。

关于作用域的问题求教！！！

1回答