在做搜索的時候，當搜索頁面只有一個輸入框、沒有確定按鈕的時候，只能在用戶輸入時請求服務端，查詢數據。這樣會導致頻繁的發送請求，造成服務端壓力。

解決這個問題，可以使用vue做輸入節流。

1、創建一個工具類，debounce.js

/***

* @param func 輸入完成的回調函數

* @param delay 延遲時間

*/

export function debounce(func, delay) {

let timer

return (...args) => {

if (timer) {

clearTimeout(timer)

}

timer = setTimeout(() => {

func.apply(this, args)

}, delay)

}

}

2、在搜索頁面使用

import {debounce} from '../utils/debounce'

export default {

name: 'HelloWorld',

data () {

return {

search: ''

}

},

created() {

this.$watch('search', debounce((newQuery) => {

// newQuery為輸入的值

console.log(newQuery)

}, 200))

}

}

.text-input {

display: block;

width: 100%;

height: 44px;

border: 1px solid #d5d8df;

}

以上這篇vue輸入節流,避免實時請求接口的實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。

本文標題: vue輸入節流,避免實時請求接口的實例代碼

本文地址: http://www.cppcns.com/wangluo/javascript/283386.html

總結

以上是生活随笔為你收集整理的vue 接口节流_vue输入节流,避免实时请求接口的实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。