防抖功能

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

應(yīng)用場景：

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

用戶在輸入框輸入時，觸發(fā)keyup事件，會多次調(diào)用同一個接口，實際需求是輸入完再請求后端接口

2、實現(xiàn)思路

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

實現(xiàn)代碼

data() {timeClear: '',key: '' }, methods: {search(val) {let delay = 1000//延遲時間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é)

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

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