[lodash / debounce / watch / delay] 디바운싱 예제

아이디 중복검사 같은 경우 키 입력이나 유효성 검사 플러그인에 포함시키는 경우가 다양하다. 하지만 입력시마다 통신하는 것은 결코 유쾌하지 않은 기분이다. 이럴때 lodash 의 debounce 를 사용하면 적절하다.

import debounce from 'lodash/debounce';
export default {
	watch : {
    	memberId:debounce((inputValue) => {
        	const Vue = this;
            let emailRegExp = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
            if (emailRegExp.test(inputValue)) {
            	Vue.$axios.post('/api/is-exists-id', { id : inputValue }, {})
                .then((response) => {
                
                })
                .catch((error) => {
                
                });
            }
        }),
        memberPw(){
        
        }
    }
}