자바스크립트 스로틀(throttle) 기능을 구현하는 간단한 코드인데, 질문이 있습니다.

Question

우선 코드는 이렇습니다. java를 하다가 javascript 코드를 보면 이해가 안 되는 게 있어서요 ㅜㅜ const $button &#61; document.querySelector(&#34;button&#34;); const $throttleMsg &#61; document.querySelector(&#34;.throttle-msg&#34;); // 궁금한 지점. const throttle &#61; (callback, delay) &#61;> { let timerId; return event &#61;> { timerId &#61; setTimeout(() &#61;> { callback(event); timerId &#61; null; }, delay, event); }; }; $button.addEventListener(&#34;click&#34;, throttle(() &#61;> { $throttleMsg.textContent &#61; &#43;$throttleMsg.textContent &#43; 1; }, 1000))throttle 이벤트가 호출될 때마다 timerId에 setTimeout()이벤트를 생성해놓고 시간이 지날 때마다 하나씩 실행되는 코드입니다. 1. timerId 변수에 null을 할당하지 않아도 정상적으로 동작하기는 한데, 굳이 null을 할당했다면 이유가 무엇일까요..? 2. &#34;return event&#34;에서 이 'event'는 말그대로 이벤트 객체라고 이해하면 되나요? 'event'가 아닌 다른 문자로 작성해도 코드가 돌아가는 걸 보면 그냥 의미가 없는 식별자인 것 같기도 한데, 무슨 의미일까요..?3. 2번이랑 연결될 수 있는데, setTimeout()의 세 번째로 오는 파라미터는 setTimeout이 실행할 콜백함수의 인수로 전달된다고 알고 있습니다. 이때 &#34;callback(event)&#34;에 전해지는 'event'는 뭐가 넘어간 것인지 궁금합니다 ㅜㅜ

다크 템플러 · Answer

2.이벤트 객체가 아니라 메서드를 통째로 반환하는 구문 같네요. 메서드 실행 결과가 아니라 메서드 그 자체를 반환하는 거죠. event는 반환될 함수의 내부에서 사용되는 파라미터입니다. 즉 3번의 답은 반환된 메서드를 실행할 때 파라미터로 주어지는 값입니다. 바깥에 있는() &#61;> { $throttleMsg.textContent &#61; &#43;$throttleMsg.textContent &#43; 1; }, 1000)이 메서드가 통째로 event의 값이겠군요. callback으로 이 메서드를 실행하는 것이죠.1번은 왜 넣었는지 잘 모르겠습니다. 변수를 추가적으로 사용하는 부분이 있다면 의도가 보일지도 모르겠지만....

퀘이사123 · Answer

1) 해당코드에서 timerId &#61; null 이 코드는 기능에 아무런 영향이 없는 코드이긴 합니다. 쓰로틀을 제대로 구현 하려면setTimeOut코드 윗줄에 if(timerId) return; 정도의 코드가 있어야 합니다.쓰로틀은 함수의 연속적인 호출을 막고, 주어진 딜레이 간격으로 한번씩 호출되게 하려는 기법인데,최초 함수가 호출 되면 timerId가 없는 상태일테니 setTimeOut코드가 실행되고 timerId가 생길겁니다.그리고 내가 준 딜레이 전에 함수가 또 호출되면 이미 timerId가 부여된게 있으니 if(timerId) return; 여기에 걸릴거구요.딜레이가 지나면 그 콜백함수안에서 timerId를 null로 초기화 시킴으로 다음번 함수콜이 실행되게 하는겁니다.2)$button.addEventListener(&#34;click&#34;, throttle(() &#61;> { $throttleMsg.textContent &#61; &#43;$throttleMsg.textContent &#43; 1; }, 1000)) //위의 코드에서 쓰로틀함수는 클로저함수를 리턴하기 때문에 아래의 코드와 같은 코드입니다. $button.addEventListener(&#34;click&#34;, event &#61;> { timerId &#61; setTimeout(() &#61;> { callback(event); timerId &#61; null; }, delay, event); })이렇게 코드를 바꿔서 보시면 이벤트리스너를 달면 기본적인 파라미터로 제공되는 이벤트 객체인게 보일겁니다. 때문에 굳이 event로 안써도 됩니다. 아무 문자나 써도되요.3)마찬가지로 이벤트객체이긴 하지만 setTimeout에서 인자로 전달한 event객체가 아니라 클로저 함수의 파라미터로 넘어온 event객체입니다. setTimeout에서 전달한 event객체를 사용하려면setTimeout((event)&#61;>) 이런식으로 setTimeOut의 콜백함수의 파라미터로 받아야합니다.참고로 말씀드리면 해당함수에서는 딱히 이벤트객체를 사용하지 않기때문에 event객체는 굳이 쓸 이유가 없네요.틀린부분이 있거나 모르시는부분이 있으면 말씀해주세요.

자바스크립트 스로틀(throttle) 기능을 구현하는 간단한 코드인데, 질문이 있습니다.

2개의 답변

Q&A 목록