首頁 > 文章 > web前端 > 關於js中定時器裡面的作用域問題

關於js中定時器裡面的作用域問題

不言原創: 2018-07-14 16:33:311655瀏覽

這篇文章主要介紹了js中計時器裡面的作用域問題，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

/*
  各种运动
*/
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指向的时候  一直报错

關於js中定時器裡面的作用域問題

我當時就想咋回事呢明明函數是定義在Animation裡面的方法也是由它調用的所以this應該指向的是Animation呀

於是乎我就繼續往下看看打了

#O,明白了 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);

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

關於js中定時器裡面的作用域問題

相關文章