Rev. 2.73

전형적인prototype.js의 클래스 작성 방법에 의해 기술되고 있습니다. Class.create 메서드로constructor함수를 작성해,prototype 프롭퍼티에 initialize 메서드와 다른 메서드를 추가하고 있습니다.

사용 방법은 함수와 실행 간격초수를 지정해인스턴스를 작성할 뿐입니다.이하의 메서드는 외부로부터 불려 가는 것을 상정하고 있지 않습니다.

initialize 메서드
지정된 함수와 실행 간격행 수를 보관 유지하고 실행상태 플래그를 false(실행하고 있지 않다)로 설정하여 registerCallback 메서드를 호출합니다.

registerCallback 메서드
setInterval 함수에 의해, onTimerEvent 메서드를 지정된 실행 간격초수 마다, 반복 실행시킵니다. 전술의 Function.bind 메서드에 의해 onTimerEvent 메서드로 this를 사용할 수 있습니다.

onTimerEvent 메서드
실행 상태 플래그가 false(실행하고 있지 않다)의 경우에, 플래그를 true(실행중)로 하고 나서, 지정된 함수를 호출합니다.종료후에 실행 상태 플래그를 false에 되돌립니다.try~finally절이 사용되고 있는 것은 지정 함수가 에러이거나 종료했을 경우에서도 플래그를 되돌리기 때문입니다.

지정 함수에 대해
통상, 지정 함수에는 인수를 지정할 수 없습니다.그렇지만, 이것도 전술 Function.bind 메서드를 사용하면 지정할 수가 있습니다.

멈추지 않는다···.
PeriodicalExecuter 로 반복해 실행하면(자), 페이지가 바뀔 때까지 제지당하지 않습니다.통상, setInterval 함수가 반환하는 타이머 식별자를 사용해, clearInterval 함수로 정지할 수 있습니다만.타이머 식별자는 버려지고 있는 것 같고. 왜인가는 잘 모릅니다...

var Test = Class.create();
Test.prototype = {
  initialize: function(a) {
    this.a = a;
  },  
  calc: function(b){
    this.a *= b;
    document.getElementById("elem").innerHTML = this.a;
  }
};
	
var test = new Test(1);

function init(){
  new PeriodicalExecuter(test.calc.bind(test, 2), 3);
}
	
function stop(){
  //멈추지 않습니다^^;
  clearInterval();
  clearTimeout();
}

Test 클래스의 인스턴스 test의 calc 메서드를, Fucntion.bind 메서드를 사용해 PeriodicalExecuter에 건네주고 있습니다. PeriodicalExecuter의 인스턴스는 용도가 없기 때문에 취득하고 있지 않습니다. 페이지 읽기 후, 3초 마다 수를 배로 해 div 엘리먼트에 기입합니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar