关于作用域的问题求教！！！
第一种情况
<!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>该情况下div可正常右移！
第二种情况
<!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>此情况下点击buttn次数越多 div速度越快，， 请问为什么？？ timer在里面在外面有区别吗？
第三种情况
<!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>在这种情况下会报错，，但是为什么。。我定义的那些odiv obtn之类的不是全局变量吗？为什么会报错？？
求高人解答！！！
超级巨浪大切浏览 1187回答 1
1回答
-
堂堂堂堂糖糖糖童鞋
第一个问题：此情况下点击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先渲染，然后再操作。
随时随地看视频慕课网APP
Html/CSS
JavaScript