close

Debounce in Vue.js: 함수 실행 제어

Debounce in은 Vue.js 입력, 끌기 등과 같은 사용자 작업 후 지정된 기간 동안 함수 실행을 지연하는 데 사용됩니다. 이것은 일반적으로 함수 호출 빈도를 제어하고 사용자가 상호 작용할 때 과도한 호출을 방지하는 데 사용됩니다.

debounce 다음은 에서 사용하는 방법에 대한 기본 가이드입니다 Vue.js.

Lodash 라이브러리 설치

Lodash 먼저 해당 기능을 사용하기 위해서는 라이브러리를 설치해야 합니다 debounce. 다음 명령을 사용하여 설치합니다 Lodash.

npm install lodash

Import 및 사용 Debounce

귀하의 Vue component, import 기능 debounce 에서 필요한 Lodash 상황에서 사용하십시오. debounce 

<template>  
  <div>  
    <input type="text" v-model="searchTerm" @input="handleSearch" />  
    <div>{{ searchResult }}</div>  
  </div>  
</template>  
  
<script>  
import _ from 'lodash';  
  
export default {  
  data() {  
    return {  
      searchTerm: '',  
      searchResult: ''  
    };  
  },  
  methods: {  
    handleSearch: _.debounce(function() {  
      // Handle search here, for example:  
      // Call search API and update searchResult  
      this.searchResult = 'Search Result: ' + this.searchTerm;  
    }, 300) // Debounce time(300ms)  
  }  
};  
</script>

위의 예에서 handleSearch 사용자가 검색 입력을 입력한 후 기능이 300ms 지연됩니다. 이렇게 하면 사용자가 빠르게 입력하는 동안 과도한 API 호출을 방지할 수 있습니다.

함수 호출 빈도를 제어하는 ​​데 도움이 되지만 시간을 너무 높게 설정 debounce 하면 사용자 경험에 영향을 미칠 수도 있습니다 debounce. 각 사용 사례에 적절한 debounce 시간을 고려하십시오.