防抖功能

• • 應用場景：
  • • 1、重復請求接口
    • 2、實現思路
  • 實現代碼

應用場景：

1、重復請求接口

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

2、實現思路

調用setTimeout計時器，在延遲時間內輸入會清空計時器，等待下一次輸入

實現代碼

data() {timeClear: '',key: '' }, methods: {search(val) {let delay = 1000//延遲時間if(this.timeClear) {clearTimeOut(this.timeClear)}this.timeClear = setTimeout(()=>{this.key = val//最終輸入的內容this.getList()//重新獲取列表數據},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('得到的數據',data)} }

總結

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

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