防抖功能

• • 應(yīng)用場(chǎng)景：
  • • 1、重復(fù)請(qǐng)求接口
    • 2、實(shí)現(xiàn)思路
  • 實(shí)現(xiàn)代碼

應(yīng)用場(chǎng)景：

1、重復(fù)請(qǐng)求接口

用戶(hù)在輸入框輸入時(shí)，觸發(fā)keyup事件，會(huì)多次調(diào)用同一個(gè)接口，實(shí)際需求是輸入完再請(qǐng)求后端接口

2、實(shí)現(xiàn)思路

調(diào)用setTimeout計(jì)時(shí)器，在延遲時(shí)間內(nèi)輸入會(huì)清空計(jì)時(shí)器，等待下一次輸入

實(shí)現(xiàn)代碼

data() {timeClear: '',key: '' }, methods: {search(val) {let delay = 1000//延遲時(shí)間if(this.timeClear) {clearTimeOut(this.timeClear)}this.timeClear = setTimeout(()=>{this.key = val//最終輸入的內(nèi)容this.getList()//重新獲取列表數(shù)據(jù)},delay)},async getList() {const This = thisconst {data} = await this.$https({methods:"GET",url:'xxx?page=xxx&pagesize=xxx&key='+This.key}).then((result)=>{return result.data})console.log('得到的數(shù)據(jù)',data)} }

總結(jié)

以上是生活随笔為你收集整理的防抖功能实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。