Sometimes, we want to run a function on input but with a delay with Vue.js and JavaScript.
In this article, we’ll look at how to run a function on input but with a delay with Vue.js and JavaScript.
How to run a function on input but with a delay with Vue.js and JavaScript?
To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.
For instance, we write:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
</div>
to add the Vue script and the app container.
Then we write:
const v = new Vue({
el: '#app',
template: `
<div>
<input @input='onInput'>
<div v-if='!isHidden'>hello</div>
</div>
`,
data: {
isHidden: true
},
methods: {
onInput() {
setTimeout(() => this.isHidden = false, 500);
}
}
})
to call onInput when the input event is triggered.
In onInput, we call setTimeout with a callback that sets this.isHidden to false to unhide the div after 500 milliseconds.
We use the v-if to only show the div with isHidden is false.
Conclusion
To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.
