最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 19:33:36
文档

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

关于js中定时器里面的作用域问题:这篇文章主要介绍了关于js中定时器里面的作用域问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下/* 各种运动 */ function Animation(){}; Animation.prototype={ /* 匀速运动 */ linear:function(obj,targe
推荐度:
导读关于js中定时器里面的作用域问题:这篇文章主要介绍了关于js中定时器里面的作用域问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下/* 各种运动 */ function Animation(){}; Animation.prototype={ /* 匀速运动 */ linear:function(obj,targe
 这篇文章主要介绍了关于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指向的时候 一直报错

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

文档

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

关于js中定时器里面的作用域问题:这篇文章主要介绍了关于js中定时器里面的作用域问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下/* 各种运动 */ function Animation(){}; Animation.prototype={ /* 匀速运动 */ linear:function(obj,targe
推荐度:
标签: 里的 的作用 js
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top