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 ユーザーが検索入力を入力した後、関数は 300 ミリ秒遅れます。 これにより、ユーザーが素早く入力しているときに過剰な API 呼び出しが行われることを回避できます。

これは debounce 関数呼び出しの頻度を制御するのに役立ちますが、時間を debounce 長く設定しすぎるとユーザー エクスペリエンスに影響を与える可能性があることに注意してください。 debounce ユースケースごとに 適切な時間を検討してください。