22.01.04 - TIL [ vue debounce ]

jinny·2022년 1월 4일
0

TIL

목록 보기
28/32
post-thumbnail

vue debounce() 사용

debounce란?

: 특정시간이 지난 시점에서 이벤트가 하나만 발생하도록 제어하는 기술
  연속적으로 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출하도록 하는 것

data 값이 변경될 때 debounce()에 의해 1초 후에 콘솔에 바뀐 값이 찍힌다.
watch를 이용해 score의 값이 바뀌는 것을 인식하고 debounce() 실행!

import debounce from "lodash/debounce";

export default {
 data() {
    return {
      str: "",
    };
  },
  watch: {
    str: debounce(function (newVal) {
      if (newVal.length >= 2) {
        console.log(newVal)
      }
    }, 1000),
  },
}
  • str에 "안녕하세요"를 입력해서 넣으면 "요"까지 입력한 후 1초 뒤에 콘솔 창에 "안녕하세요"가 뜬다.
profile
주니어 개발자의 기록

0개의 댓글