When doing searching, when the search page has only one input box and no confirm button, you can only request the server to query data when the user enters. This will lead to frequent sending requests and cause pressure on the server.
To solve this problem, you can use vue for input throttling.
1. Create a tool class.
/***
* @param func Input completed callback function
* @param delay delay time
*/
export function debounce(func, delay) {
let timer
return (...args) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
(this, args)
}, delay)
}
}
2. Use it on the search page
<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 is the input value (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>
The above example code for throttling the vue input and avoiding real-time requests for interfaces is all the content I share with you. I hope you can give you a reference and I hope you can support me more.