vue輸入節(jié)流,避免實(shí)時(shí)請(qǐng)求接口的實(shí)例代碼
更新時(shí)間：2019年10月30日 14:40:00 作者：、不知不覺、
今天小編就為大家分享一篇vue輸入節(jié)流,避免實(shí)時(shí)請(qǐng)求接口的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
在做搜索的時(shí)候，當(dāng)搜索頁(yè)面只有一個(gè)輸入框、沒有確定按鈕的時(shí)候，只能在用戶輸入時(shí)請(qǐng)求服務(wù)端，查詢數(shù)據(jù)。這樣會(huì)導(dǎo)致頻繁的發(fā)送請(qǐng)求，造成服務(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、在搜索頁(yè)面使用
<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í)請(qǐng)求接口的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動(dòng)態(tài)數(shù)據(jù)顯示
同大多數(shù)的前端框架一樣，先讀官網(wǎng)的使用方法。學(xué)會(huì)基本使用后，在實(shí)例中找到自己想要demo。拿過來改一改，一個(gè)echarts圖表就形成，畢竟人家做就是為了方便使用，這篇文章主要介紹了Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動(dòng)態(tài)數(shù)據(jù)顯示2022-10-10
今天小編就為大家分享一篇vue 實(shí)現(xiàn)特定條件下綁定事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
詳解Vue CLI3 多頁(yè)應(yīng)用實(shí)踐和源碼設(shè)計(jì)
這篇文章主要介紹了詳解Vue CLI3 多頁(yè)應(yīng)用實(shí)踐和源碼設(shè)計(jì)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中怎樣讓函數(shù)只執(zhí)行一次問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了vue 開發(fā)一個(gè)按鈕組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue3實(shí)現(xiàn)無縫滾動(dòng)列表效果(大屏數(shù)據(jù)輪播場(chǎng)景)
vue3-scroll-seamless 是一個(gè)用于 Vue 3 的插件,用于實(shí)現(xiàn)無縫滾動(dòng)的組件,它可以讓內(nèi)容在水平或垂直方向上無縫滾動(dòng),適用于展示輪播圖、新聞滾動(dòng)、圖片展示等場(chǎng)景,本文就給大家介紹了vue3實(shí)現(xiàn)無縫滾動(dòng)列表效果,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了vue頁(yè)面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
在Vue中，過渡和動(dòng)畫是一種用于在組件之間添加平滑過渡效果和動(dòng)畫效果的高級(jí)用法，Vue提供了一些內(nèi)置的過渡和動(dòng)畫功能，同時(shí)也支持自定義過渡和動(dòng)畫效果，本文就給大家介紹一些Vue中過渡和動(dòng)畫的高級(jí)用法,需要的朋友可以參考下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