登录  /  注册
首页 > web前端 > js教程 > 正文

关于js中定时器里面的作用域问题

不言
发布: 2018-07-14 16:33:31
原创
1499人浏览过

这篇文章主要介绍了关于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指向的时候  一直报错
登录后复制

1368647-20180714151151337-1876865526[1].png

我当时就想咋回事呢 明明函数是定义在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);
登录后复制

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网! 

 相关推荐:

对于JavaScript中DOM对象的分析

如何解决angular分页插件tm.pagination二次触发的问题

以上就是关于js中定时器里面的作用域问题的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号