vue 实时搜索 防抖功能
生活随笔
收集整理的這篇文章主要介紹了
vue 实时搜索 防抖功能
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
最近在做實(shí)時(shí)搜索功能時(shí),被要求使用防抖函數(shù),就自己手寫一個(gè),已用于大型項(xiàng)目中
<template><el-input placeholder="請(qǐng)搜索關(guān)鍵字" @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請(qǐng)求...this.isLoading=false}} }總結(jié)–:自己平常沒事的時(shí)候就會(huì)看看基礎(chǔ)API,鞏固一下基礎(chǔ),這樣,在封裝公共組件或者公共方法時(shí),就不會(huì)手忙腳亂,毫無頭緒了! 現(xiàn)在的努力,總會(huì)在將來的某個(gè)不經(jīng)意的時(shí)間收到回報(bào)的,加油!
總結(jié)
以上是生活随笔為你收集整理的vue 实时搜索 防抖功能的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: todo Java注解
- 下一篇: vue_todo案例超详细讲解(可跟做练