vue自定义指令封装节流_vue输入节流,避免实时请求接口的实例代码

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

解决这个问题，可以使用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输入节流,避免实时请求接口的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2019-10-28