定时器里面的作用域问题

2018-07-16 03:12:30来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

/*
  各种运动
*/
function Animation(){};


Animation.prototype={

/*
匀速运动
*/ linear:
function(obj,target){ obj.timer=null; clearInterval(obj.timer); var step=obj.offsetLeft<target?5:-5;//用位置来判断运动的方向 if(obj.offsetLeft!=target){ obj.timer=setInterval(function(){ var res=target-obj.offsetLeft;//核心好代码 当运动到指定位置的时候差值不会超过5 来作为停止运动的条件 if(Math.abs(res)<=Math.abs(step)){ obj.style.left=target+"px"; clearInterval(obj.timer); } else{ obj.style.left=obj.offsetLeft+step+"px"; } } ,1000/60); } }, /*
循环往复运动
*/ loop:
function(obj,target){ var timer=null; clearTimeout(timer); var fn=arguments.callee.bind(this);//绑定this指向 if(obj.offsetLeft==target){ this.linear(obj,0); } else if(obj.offsetLeft==0){ this.linear(obj,target); } /* 定时器的作用域是全局作用域 在里面调用的函数都是全局作用域下调用的 */ timer=setTimeout(function(){ fn(obj,target); },900); } }
var animation=new Animation();


刚开始我没有绑定fn的this指向的时候 一直报错

 

 

 我当时就想咋回事呢  明明函数是定义在Animation里面的  方法也是由它调用的  所以this应该指向的是Animation呀

于是乎我就继续往下看  看打了

 

奥,明白了  setTimeout 和 setInterval  

 一般都是这么写

  timer=setTimeout(function(){},1000/60);

 形成了闭包  闭包里面的普通函数  作用域是window

所以在window下执行fn  那么this 就是window

而linear是定义在Animation里面的  所以找不到函数  报错

如果把fn函数的作用域绑定在Animation上 就没关系了

var fn=arguments.callee.bind(this);
当调用loop的时候 this指的就是Animation


如果没明白 我再举一个简单的例子
var obj={
age:"17;
}

setInterval(function(){

console.log(this.age);

}.bind(obj),1000);

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:事件冒泡 比bubble

下一篇:13行js写贪吃蛇游戏