javascript - 用变量和属性有什么差别吗？
本文介绍了javascript - 用变量和属性有什么差别吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
简单做了一个图片抖动的方法。发现在其中声明变量来存数值和属性存数值最后结果不一样，看了好久，没看出问题出在哪里。请各位帮我解答一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 100px;
height: 100px;
position: absolute;
top: 200px;
}
</style>
<script>
window.onload=function(){
var aImg=document.getElementsByTagName('img');
for(var i=0;i<aImg.length;i++){
aImg[i].style.left=20+i*110+'px';
aImg[i].onmouseover=function(){
shake(this,'top');
}
}
}
function shake(obj,attr,endFn){
var pos=parseInt(getStyle(obj,attr));
// obj.pos =parseInt(getStyle(obj,attr));问题在这里，当我用一个属性来存对象的位置数值时，抖动就会偏离原始位置。 这是为毛啊。
var arr=[];
var num=0;
for(var i=20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0);
if (obj.onOff) {
return
}
obj.onOff=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.style[attr]=pos+arr[num]+'px';
//obj.style[attr]=obj.pos+arr[num]+'px';
num++;
if(num===arr.length){
clearInterval(obj.timer);
obj.onOff=false;
endFn&&endFn();
}
},50)
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
</script>
</head>
<body>
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
</body>
</html>解决方案
从题主的代码来看，如果把pos赋值给obj中的一个属性的话，在抖动的过程中鼠标移动到元素上就会造成抖动偏移，因为每次执行shake的时候obj.pos属性都会根据当前top刷新（虽然接下来就因为正在抖动中跳出了函数），因此会干扰到timer中的取值，而使用局部变量则没有这个问题（timer中使用的pos变量始终是最初开始抖动时定义的那个变量）
修改的话你把if (obj.onOff) { return; }提取到shake函数开头就可以避免这个问题了。
这篇关于javascript - 用变量和属性有什么差别吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
