디바운싱
by 개발하는지호/**
* source ~ : 번역할 텍스트, 번역할 언어의 타입
* target ~ : 번역 결과 텍스트, 번열될 언어의 타입
*
*/
import { log } from "console";
const [sourceSelect, targetSelect] = document.getElementsByTagName('select');
//배열 로 된다. 첫 번째 select는 sourceSelect이고 두번째 select는 targetSelect가 된다ㅣ
const [sourceTextArea, targetTextArea] = document.getElementsByClassName('textarea');
let targetLanguage = 'en'; // 번역하고 싶은 언어의 타입, 초기값을 en으로 둠
//번역될 언어의 타입 변경 이벤트
// English면 en, 한궁어면 ko
targetSelect.addEventListener('chage', (event) => targetLanguage = event.target.value);
let timer;
sourceTextArea.addEventListener('input', (event) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
const text = event.target.value;
console.log(text);
}, 2000);
//debouncing
})
input 이벤트를 발생시킬 때 타자를 칠 때마다 출력이되는 현상을 볼 수 있다. 이를 막고자 debounce 작업을 하게 된다.
timer라는 변수를 선언한 뒤에 setTimeout을 통해 출력되는 시간을 늦춘 뒤 clearTimeout을 통해서 timer의 setTimeout을 초기화 시킨다. (입력할때마다 2초 다시 카운트) 그렇게 바로 원하는 글자를 입력하면 완성한 상태에서 다시 2초 뒤에 출력된다.
이는 debounce라는 함수를 통해서도 할 수 있다.
*함수에서 리턴 값이 없으면 값이 나오지 않는다. console.log() 는 리턴 값이 아니라 실행되면 단순히 콘솔에 출력되는 형태이다. timer는 setTimeout 함수의 기능만 저장된 상태이다.
블로그의 정보
DevSecOps
개발하는지호
