Debouncetrong Vue.js: Kiểm Soát Thực Thi Hàm

Trong Vue.js, debounce được sử dụng để trì hoãn việc thực thi một hàm sau một khoảng thời gian nhất định sau khi người dùng thực hiện một hành động (ví dụ: gõ phím, kéo thả, vv). Điều này thường được sử dụng để kiểm soát tần suất gọi hàm và tránh việc gọi hàm quá nhiều khi người dùng thao tác.

Dưới đây là hướng dẫn cơ bản về cách sử dụng debounce trong Vue.js:

Cài đặt Thư viện Lodash

Trước hết, bạn cần cài đặt thư viện Lodash để sử dụng hàm debounce. Sử dụng lệnh sau để cài đặt Lodash:

npm install lodash

Import và Sử dụng Debounce

Trong thành phần Vue của bạn, bạn cần import hàm debounce từ Lodash và sử dụng nó trong các tình huống cần 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() {
      // Xử lý tìm kiếm ở đây, ví dụ:
      // Gọi API tìm kiếm và cập nhật searchResult
      this.searchResult = 'Kết quả tìm kiếm: ' + this.searchTerm;
    }, 300) // Khoảng thời gian debounce (300ms)
  }
};
</script>

Trong ví dụ trên, hàm handleSearch sẽ bị trì hoãn việc thực thi 300ms sau khi người dùng gõ vào ô tìm kiếm. Điều này giúp tránh gọi API quá nhiều lần khi người dùng đang gõ nhanh.

Lưu ý rằng debounce giúp kiểm soát tần suất gọi hàm, nhưng nó cũng có thể ảnh hưởng đến trải nghiệm người dùng nếu thời gian debounce được đặt quá cao. Hãy cân nhắc về mức debounce thích hợp cho từng tình huống sử dụng.