필요성

자바스크립트 비동기 이벤트를 실행할 때, 특정 비동기 이벤트의 경우 완료되기 전까지는 이벤트를 무시해야 하는 상황이 필요하다. 지금까지 이 경우는 해당 이벤트에 대한 구현이 중구난방이며, 추후 개발에 어려움이 있었다.

  1. 글로벌에 객체가 있던가(소스파일 내 공통으로 사용되는 프로퍼티 포함)
  2. 임의로 변수를 함수 맨 위에 지정하여 true,false로 변경하던가
  3. 이벤트가 진행하는 동안 해당 이벤트를 unbind를 하고 성공하면 다시 해당 함수를 다시 로딩하여 이벤트에 넣는다.

이 외에 어떤 방식이 더 있는지는 모르겠지만, 대부분은 1,2번의 방식으로 되어 있기 때문에 여기에만 초점을 맞추자면, 이 경우 해당 소스를 변경할 때 어려움이 있다. 일단 해당 프로퍼티나 변수가 왜 있는지 이해가 안되는 경우가 많다.

시간을 들이면 당연히 이해가 된다. 하지만 만약에 이벤트를 하나 더 생성해야 하며 동일하게 Lock의 형태의 변수가 필요하면? 글로벌 프로퍼티나, 함수 맨 위에 하나의 변수를 생성하게 될 텐데, 이렇게 되면 추후 다시 이 소스를 보는 누군가는 이 변수가 무슨 일을 하나 다시 보아야 한다. 이것들이 축적될 것으로 보인다.

또한 어떤 이벤트들은 락이 각각 하나가 아니라 하나의 락으로 여러개의 이벤트가 공유가 되면 더 활용도가 높아 보이는 경우가 있다. 이 경우에 글로벌 프로퍼티를 쓰게 된다면 더 이해를 할 수 없게 될 것이다.

하여 해당 Lock을 closure로 감추어 안전을 꽤하도록 하였다.

api

var Lock = function() {
		this.L = false;
};
Lock.prototype.isLocked = function() {
	return this.L;
};
// 락 해제
Lock.prototype.free = function() {
	return this.L = false;
};
// 락 시도
Lock.prototype.tryLock = function() {
	if(this.isLocked()) {
		return false;
	} else {
		this.L = true;
		return true;
	}
};
// 클로저로 락을 생성.
Lock.withLock = function(fnc) {
	var newLock = new Lock();
	return fnc(newLock);
};

사용방법

Lock.withLock((lock) => {
	$("#id").click(() => {
		clickEventAsync(lock);
	});
});

function clickEventAsync(L) {
	if (L.tryLock()) {
		// do sth.
		L.free();
	}
}