close

Debounce ใน 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 เวลาที่เหมาะสมในการใช้งานแต่ละกรณี