lodash
javascript 유틸리티 라이브러리입니다. 여러 가지 기능이 있는데 저도 별로 사용해 보지 않아서
이제부터 사용하려고 하고 있어서 많은 기능에 대해서는
이곳을 참조하세요 ^^
_.debounce
lodash의 많은 기능중에 _.debounce만?을 ㅋㅋ 사용하고 있습니다. 다른 많은 기능은 이제부터 사용해 보려고요 ㅋㅋ
_.debounce를 간단하게 말씀드리면 마지막에 실행된것을 한번만 실행하게 해주는 마법의 기능을 ㅋㅋ
설명은 글보다 소스로..
이렇게 하면(소스에 생략이 많습니다.)
이런 결과를 볼수 있습니다.
만약 위의 입력창이 검색창이었을때 "abcd"를 검색하는데 4번의 검색결과를 가져올것입니다.
여러가지 방법으로 한번만 가져오게 할수 있지만 _.debounce를 이용해 보겠습니다.
많은 소스를 추가하지 않고 간단하게 제가 원하는 결과를 얻었습니다.
"abcd"를 눌러도 결과는 한번만 보여지는 ^^
_.debounce(func, [wait=0], [options={}])
_.debounce로 function부분을 감싸주고 시간과 옵션을 정해주면 됩니다.
[wait=0] 부분을 저는 1000을 주었는데 1초 딜레이를 주고 결과를 보여줍니다.
[options={}]는 사용해 보지 않아서 설명드릴것이 없네요 죄송죄송
마치며
간단하게 _.debounce를 사용해 보았습니다.여러곳에 사용이 가능하다고 생각 됩니다. 저는 검색창과 전송 버튼에 사용하고 있습니다. 간혹 전송 버튼을 빠르게 누르면 두번 날라가는 일이 있어서
한번 클릭이 있으면 전송 버튼을 비활성화 하곤 했는데 이걸 사용하면 정말 간단하게 이중 클릭을 막을수 있습니다.
참 간단한게 중복 실행을 막을수 있는 방법인것 같습니다.
_.debounce 이외에도 여러가지 기능이 있으나 저는 아직 사용하지 않고 있지만 꼭 사용해보고 싶네요 ㅋㅋ
반응형