防抖函數(shù)的原理：

• 只有在事件觸發(fā)的時(shí)候才會(huì)延遲加載，如果在延遲加載之前再次觸發(fā)，則會(huì)刷新延遲時(shí)間重新延遲，觸發(fā)次數(shù)有且只有觸發(fā)一次；
  使用場(chǎng)景：
• 防抖函數(shù)一般是用于頻繁觸發(fā)事件，而我們只需要它觸發(fā)一次的場(chǎng)景，比如：輸入框的oninput事件、button按鈕點(diǎn)擊事件、點(diǎn)贊等操作場(chǎng)景；
  實(shí)例：
  例如在vue-cli腳手架中使用防抖函數(shù)來進(jìn)行提升性能
  vue-cli：定義一個(gè)util.js，添加以下代碼

// 函數(shù)防抖 export function debounce(fn, wait) {let timeout = null;wait = wait || 600;return function () {let that = this;if(timeout !== null) clearTimeout(timeout); timeout = setTimeout(() => {fn.apply(that);}, wait);} } //（注意：我們?cè)趘ue-cli中自定義方法必須要export拋出，不然組件讀取不到）

使用和引用組件：

//在需要用到的頁面引入 import {debounce} from "@/utils/utils"

調(diào)用方法：

//在需要用到的頁面寫方法 methods: {inputNum: debounce(function(){console.log(1111);}, 1000) //這個(gè)1000代表事件延遲一秒執(zhí)行}

總結(jié)

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

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