> 웹 프론트엔드 > JS 튜토리얼 > js 타이머의 범위 문제에 대하여

js 타이머의 범위 문제에 대하여

不言
풀어 주다: 2018-07-14 16:33:31
원래의
1709명이 탐색했습니다.

이 글은 주로 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

을 가리켜야 합니다. 그래서 계속해서 읽어 보았습니다. 일반적으로 다음과 같이 작성됩니다.

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

클로저에서 일반 함수의 범위는 window

따라서 fn이 다음과 같습니다. window 아래에서 실행하면 window

이고 animation에 선형이 정의되어 있으므로 함수를 찾을 수 없고 오류가 보고됩니다.

fn 함수의 범위가 Animation에 바인딩된 경우에는 그렇지 않습니다. Matter

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

의 2차 트리거 문제를 해결하는 방법

위 내용은 js 타이머의 범위 문제에 대하여의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿