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