vue輸入節(jié)流,避免實(shí)時(shí)請求接口的實(shí)例代碼
更新時(shí)間：2019年10月30日 14:40:00 作者：、不知不覺、
今天小編就為大家分享一篇vue輸入節(jié)流,避免實(shí)時(shí)請求接口的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在做搜索的時(shí)候，當(dāng)搜索頁面只有一個(gè)輸入框、沒有確定按鈕的時(shí)候，只能在用戶輸入時(shí)請求服務(wù)端，查詢數(shù)據(jù)。這樣會導(dǎo)致頻繁的發(fā)送請求，造成服務(wù)端壓力。
解決這個(gè)問題，可以使用vue做輸入節(jié)流。
1、創(chuàng)建一個(gè)工具類，debounce.js
/***
* @param func 輸入完成的回調(diào)函數(shù)
* @param delay 延遲時(shí)間
*/
export function debounce(func, delay) {
let timer
return (...args) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
2、在搜索頁面使用
<template>
<div class="xn-container">
<input type="text" class="text-input" v-model="search">
</div>
</template>
<script>
import {debounce} from '../utils/debounce'
export default {
name: 'HelloWorld',
data () {
return {
search: ''
}
},
created() {
this.$watch('search', debounce((newQuery) => {
// newQuery為輸入的值
console.log(newQuery)
}, 200))
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.text-input {
display: block;
width: 100%;
height: 44px;
border: 1px solid #d5d8df;
}
</style>
以上這篇vue輸入節(jié)流,避免實(shí)時(shí)請求接口的實(shí)例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動態(tài)數(shù)據(jù)顯示
同大多數(shù)的前端框架一樣，先讀官網(wǎng)的使用方法。學(xué)會基本使用后，在實(shí)例中找到自己想要demo。拿過來改一改，一個(gè)echarts圖表就形成，畢竟人家做就是為了方便使用，這篇文章主要介紹了Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動態(tài)數(shù)據(jù)顯示2022-10-10
今天小編就為大家分享一篇vue 實(shí)現(xiàn)特定條件下綁定事件，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì)
這篇文章主要介紹了詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中怎樣讓函數(shù)只執(zhí)行一次問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了vue 開發(fā)一個(gè)按鈕組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue3實(shí)現(xiàn)無縫滾動列表效果(大屏數(shù)據(jù)輪播場景)
vue3-scroll-seamless 是一個(gè)用于 Vue 3 的插件,用于實(shí)現(xiàn)無縫滾動的組件,它可以讓內(nèi)容在水平或垂直方向上無縫滾動,適用于展示輪播圖、新聞滾動、圖片展示等場景,本文就給大家介紹了vue3實(shí)現(xiàn)無縫滾動列表效果,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了vue頁面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
在Vue中，過渡和動畫是一種用于在組件之間添加平滑過渡效果和動畫效果的高級用法，Vue提供了一些內(nèi)置的過渡和動畫功能，同時(shí)也支持自定義過渡和動畫效果，本文就給大家介紹一些Vue中過渡和動畫的高級用法,需要的朋友可以參考下2023-06-06
Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式
本文主要介紹了Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問題的解決方法
這篇文章主要介紹了vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問題的解決方法，vue父組件向子組件傳遞數(shù)據(jù)的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12