vue組件中使用防抖函數(shù)的方式
更新時(shí)間：2025年04月27日 09:05:33 作者：Tt濤㏒
這篇文章主要介紹了vue組件中使用防抖函數(shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue組件中使用防抖函數(shù)
在實(shí)際開發(fā)中，比如搜索欄，用戶輸入一個(gè)字符都要發(fā)送網(wǎng)絡(luò)請(qǐng)求來返回搜索結(jié)果，這樣對(duì)服務(wù)器的壓力就太大了，我們需要使用防抖函數(shù)，來降低這個(gè)頻率
1.在組件methods中定義防抖函數(shù)
methods: {
debounce(fn, wait) {
let timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(function () {
fn.apply(this, args)
}, wait)
}
}
}
/* fn：需要頻繁調(diào)用的方法 */
/* wait：間隔時(shí)間，表示多長(zhǎng)時(shí)間沒有操作則執(zhí)行fn方法*/
/* 為什么要使用fn.apply()方法？需要改變function的this指向 */2.在組件data中定義一個(gè)空的數(shù)據(jù)
data() {
return {
getData:null
}
}3.在組件的創(chuàng)建或掛載生命周期函數(shù)中調(diào)用防抖函數(shù)
并將返回值賦值給data中的getData
- 在methods中添加一個(gè)方法，用于模擬需要頻繁調(diào)用的方法（比如網(wǎng)絡(luò)請(qǐng)求）
methods: {
request(e) {
if (e) {
console.log('發(fā)送網(wǎng)絡(luò)請(qǐng)求:' + e)
}
}
}
/* 判斷一下e的值是否為空，如果為空則不發(fā)送請(qǐng)求 */- 在created或mounted生命周期函數(shù)中調(diào)用防抖函數(shù)
created() {
this.getData = this.debounce(this.request,500)
}
/* 調(diào)用防抖函數(shù)的同時(shí)傳入一個(gè)方法，和間隔時(shí)間（傳入的方法不帶括號(hào)表示直接把函數(shù)本身傳入，如果帶有括號(hào)則表示直接執(zhí)行函數(shù)） */
/* 防抖函數(shù)返回的是一個(gè)function，我們用data中的getData來接收它 */4.在methods中創(chuàng)建一個(gè)方法，并調(diào)用data中的getData
methods: {
getServerData(e) {
this.getData(e.target.value)
}
}5.在input中模擬防抖
<template>
<div>
<input type="text" v-on:input="getServeData($event)">
</div>
</template>6.結(jié)果對(duì)比
- 沒有防抖
- 開啟防抖
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue使用lodash中debounce(防抖函數(shù))的幾種方法實(shí)現(xiàn)
- vue中如何使用lodash的debounce防抖函數(shù)
- vue中使用loadsh的debounce防抖函數(shù)問題
- vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題解決方案
- Vue3使用customRef封裝防抖函數(shù)的方法詳解
- 如何在Vue中使用debouce防抖函數(shù)
- 在vue中使用防抖函數(shù)組件操作
- vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)實(shí)例代碼（防抖函數(shù)的應(yīng)用場(chǎng)景）
相關(guān)文章
文章總結(jié)了Vue3中props和ref的使用方法、特點(diǎn)及區(qū)別,包括基本用法、類型校驗(yàn)、默認(rèn)值設(shè)置、事件通信等,并指出了常見誤區(qū)和最佳實(shí)踐2026-01-01
這篇文章主要介紹了VueRouter路由模式的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
使用Vue封裝一個(gè)可隨時(shí)暫停啟動(dòng)無(wú)需擔(dān)心副作用的定時(shí)器
這篇文章主要為大家詳細(xì)介紹了如何使用Vue封裝一個(gè)可隨時(shí)暫停啟動(dòng)無(wú)需擔(dān)心副作用的定時(shí)器,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
vue中的@click.native 原生點(diǎn)擊事件
這篇文章主要介紹了vue中的@click.native 原生點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+iview/elementUi實(shí)現(xiàn)城市多選
這篇文章主要介紹了vue+iview/elementUi實(shí)現(xiàn)城市多選，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問題及解決
這篇文章主要介紹了vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇vue.js中$set與數(shù)組更新方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
element-ui tooltip修改背景顏色和箭頭顏色的實(shí)現(xiàn)
這篇文章主要介紹了element-ui tooltip修改背景顏色和箭頭顏色的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12