快捷導(dǎo)航

vue輸入節(jié)流,避免實(shí)時(shí)請(qǐng)求接口的實(shí)例代碼

更新時(shí)間：2019年10月30日 14:40:00 作者：、不知不覺(jué)、

今天小編就為大家分享一篇vue輸入節(jié)流,避免實(shí)時(shí)請(qǐng)求接口的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在做搜索的時(shí)候，當(dāng)搜索頁(yè)面只有一個(gè)輸入框、沒(méi)有確定按鈕的時(shí)候，只能在用戶輸入時(shí)請(qǐng)求服務(wù)端，查詢數(shù)據(jù)。這樣會(huì)導(dǎo)致頻繁的發(fā)送請(qǐng)求，造成服務(wù)端壓力。

解決這個(gè)問(wèn)題，可以使用vue做輸入節(jié)流。

1、創(chuàng)建一個(gè)工具類(lèi)，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組件傳值的幾種常用方式(一)
這篇文章主要給大家分享的是Vue組件傳值的幾種常用方式，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-09-09
vue實(shí)現(xiàn)一個(gè)移動(dòng)端屏蔽滑動(dòng)的遮罩層實(shí)例
本篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)移動(dòng)端屏蔽滑動(dòng)的遮罩層實(shí)例，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-06-06
vue.js的手腳架vue-cli項(xiàng)目搭建的步驟
這篇文章主要介紹了vue.js的手腳架vue-cli項(xiàng)目搭建的步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
關(guān)于Vue如何清除緩存的方法詳解
緩存清除成為克服瀏覽器緩存中過(guò)時(shí)內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù),術(shù)語(yǔ)“緩存清除”是指故意使靜態(tài)資源失效或進(jìn)行版本控制,迫使瀏覽器在發(fā)生更改時(shí)獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下
2023-12-12
vue3的自定義指令directives實(shí)現(xiàn)
本文主要介紹了vue3的自定義指令directives實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作
這篇文章主要介紹了vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
初試vue-cli使用HBuilderx打包app的坑
這篇文章主要介紹了初試vue-cli使用HBuilderx打包app的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vue3 diff 算法示例
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
基于Vue實(shí)現(xiàn)平滑過(guò)渡的拖拽排序功能
這篇文章主要介紹了vue實(shí)現(xiàn)平滑過(guò)渡的拖拽排序功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
基于vue 動(dòng)態(tài)菜單刷新空白問(wèn)題的解決
這篇文章主要介紹了基于vue 動(dòng)態(tài)菜單刷新空白問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08