jquery each 에서 시간 간격(interval) 효과를 사용해보았습니다.

jquery 를 사용하면서 선택된 여러개의 데이터들을 한번에 이벤트를 주는 경우가 있습니다.

예를 들어서 smsCheck 라는 클래스 이름을 가진 체크 박스가 있다고 생각해 보십시오.

그리고 선택된 체크박스에 대해서만 a 태그로 된 sendSMSBtn 클래스를 가진 버튼이 있다고 생각해 보십시오.

그러면 이 때 선택된 체크박스에 대해서만 해당 테이블 같은 라인에 있는 버튼을 일괄적으로 클릭 이벤트를 발생시켜 보겠습니다.

 

그런데 문제점은 각 클릭된 이벤트들이 순식간에 일어났을 경우가 문제 입니다.

서버에서는 동시에 여러개의 ajax 관련 내용이 실행이 된다고 했을 경우에 문제가 될 여지가 있어 보입니다.

따라서 jqury를 사용할때 each 문장에서 각 개별적으로 이벤트를 시간적으로 여유를 두고 클릭 이벤트를 실행하게 하고 싶습니다.

 

그래서 찾아보니 setTimeout 함수를 이용하는 것이었습니다. 물론 delay 함수도 있었지만 제가 생각하는 것처럼 나타나지 았았기 때문에 setTimeout으로 사용하게 되었습니다.

 

 

[원래의 소스코드]

$('.smsCheck:checked').each(function(index){  
 
	$(this).parents('tr:first').find('a.sendSMSBtn').click(); 

});

 

[수정된 소스코드]

$('.smsCheck:checked').each(function(index){  

	var pointer = $(this).parents('tr:first').find('a.sendSMSBtn');
		setTimeout(function(){
			pointer.click();
			// console.log(index);
	}, index*200);

});

수정된 소스 코드는 index 값을 이용하여서 timeout 값을 200 마이크로 세컨드 단위로 실행하게 하였습니다.

참고로 pointer 변수를 사용했던 이유는 변수 사용없이 사용하게 되면 click 함수가 제대로 실행이 되지 않았습니다.

그 이유는 아마도 시간차가 생겨서 클릭 이벤트가 일어나야하는 포인터? 정보가 사라져서 그런것일까(?)라는 생각이 들었습니다.

 

아무튼 저와 같은 문제점이 있었던 분들에게 도움이 되셨으면 좋겠습니다.