클릭 이벤트의 중복 방지 처리

JavaScript
1

이미 알고 계신 내용일거 같지만…

보통 새창을 열때 버튼이나 여타 객체를 터치하면 윈도우가 생성되도록 하는데…
비동기 프로그래밍의 특성? 으로인해 새창이 랜더링 되기전에 빠르게 버튼을 여러번 누를 수 있게 되서
창이 여러개 뜨는 현상이 발생합니다.

이를 막기 위해서 이벤트를 Remove 했다가 다시 Add를 하거나 체크 플래그를 뒤서 뒤에 이벤트를 무시하게 하는
방법을 쓰곤 했는데…

지저분한 코드를 보고 있자니 분명 간단한 방법?을 이미 만들어 놨을 거란 생각에 구글링을 해보니 역시나 있네요…

underscore에서 제공하는 throttle() 함수를 사용하면 특정 시간동안 한번만 실행되도록 제한 할수가 있네요.
비슷하게 debounce() 함수도 있는데…이 경우에는 bounce()보다는 throttle() 함수가 적격이라 생각하는데…
맞나요? ^^

두 함수의 차이에 대한 글은 다른 이벤트에 대한 예이긴 하지만 아래 블로그에 잘 정리되어 있네요.

1개의 좋아요
2

_.debounce에 3번째 옵션인 immediate를 줘서 실행하는게 더 좋습니다.

var clickFn = _.debounce(function (e){
    ...
}, 700, true); // immediate

throttle은 스크롤 이벤트와 같이 반복적으로 발생하는 경우에 빈도를 조절하기 위해서 사용하구요.
debounce가 중복실행방지를 위해서 사용하는데 더 적합해요.

1개의 좋아요