最近在做實時搜索功能時，被要求使用防抖函數，就自己手寫一個，已用于大型項目中

<template><el-input placeholder="請搜索關鍵字" @input="inputHandle" v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input> </template> export default{data(){timeId: undefined,isLoading: false,input4: ''},methods:{inputHandle(val){this.input4 = val/*以下為防抖代碼*/if (!this.timeId && !this.isLoading) {this.guidanceTailList()}if (this.timeId) {clearTimeout(this.timeId)}this.timeId = setTimeout(() => {this.timeId = undefinedclearTimeout(this.timeId)this.guidanceTailList()}, 2500)/*以上為防抖代碼*/},guidanceTailList(){this.isLoading=true......省略ajax請求...this.isLoading=false}} }

總結–：自己平常沒事的時候就會看看基礎API,鞏固一下基礎，這樣，在封裝公共組件或者公共方法時，就不會手忙腳亂，毫無頭緒了! 現在的努力，總會在將來的某個不經意的時間收到回報的，加油！

總結

以上是生活随笔為你收集整理的vue 实时搜索 防抖功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。