vue 接口节流_Vue输入节流,避免实时请求接口的实例代码_气质_前端开发者

在做搜索的时候，当搜索页面只有一个输入框、没有确定按钮的时候，只能在用户输入时请求服务端，查询数据。这样会导致频繁的发送请求，造成服务端压力。

解决这个问题，可以使用

1、创建一个工具类，debounce.

/***

* @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))

}

}