lodash 라이브러리 (Debounce)

# lodash 라이브러리

• lodash는 javascript 유틸리티 라이브러리이다.
• Debounce는 lodash에 있는 기능 중 하나이다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

## Debounce

• 특정 함수가 반복 실행 될 경우 사용, 지연시간을 설정하여 반복된 호출을 1번 호출하도록 제어해준다.
• 주로 회원가입 폼에서 많이사용, 회원가입 시 아이디 등 중복체크 기능을 사용할 경우 값이 매번 입력될 때마다 중복체크가 되어 서버 낭비가 발생하는 것을 방지해주기 위해 사용한다.

_.debounce(콜백함수, 시간)

## 예제

• 아이디 중복 체크 기능  Debounce 이용한 딜레이 설정
• 설정 후 확인 시 F12 > Network > XHR 에서 입력하면서 확인 가능

<div class="form-row">
  <div class="label">아이디</div>
  <div class="input">
    <input onkeyup="JoinForm__checkLoginIdDup(this);" type="text" name="loginId" maxlength="20" placeholder="회원 id 입력">
    <div class="message-msg"></div>
  </div>
</div>

<script>

	<!-- 회원가입 아이디 중복 체크 -->
	function JoinForm__checkLoginIdDup(input) {
		var form = input.form;

		form.loginId.value = form.loginId.value.trim();

		if (form.loginId.value.length == 0) {
			return;
		}

		$.get('getLoginIdDup', {
			loginId : form.loginId.value
		}, function(data) {
			var $message = $(form.loginId).next();

			// resultCode : 중복 체크 값 S- 중복 아님 / F- 중복
			if (data.resultCode.substr(0, 2) == 'S-') {
				$message.empty().append(
						'<div style="color:green;">' + data.msg + '</div>');
				JoinForm__validLoginId = data.loginId;
			} else {
				$message.empty().append(
						'<div style="color:red;">' + data.msg + '</div>');
				JoinForm__validLoginId = '';
			}
		}, 'json');
	}
    
    <!-- lodash 라이브러리 (debounce) 를 이용한 딜레이(1초) 설정  -->
	JoinForm__checkLoginIdDup = _.debounce(JoinForm__checkLoginIdDup, 1000);

</script>