Vue Settimeout | Delay
In this tutorial, we provide two examples to demonstrate how to use Vue.js setTimeout function for delay or waiting in performance or function, like for 1 second or 5 seconds.

written

reviewed

updated

Thanks for your feedback!
Your contributions will help us to improve service.
In this example, we will learn how to use setTimeout
with an async function in Vue.js for delaying a function that we want to execute.
Vue Sleep 1 Second
Copied to Clipboard
xxxxxxxxxx
<script type="module">
const app = Vue.createApp({
data() {
return {
buttonColor: 'blue'
};
},
methods: {
async changeColor() {
this.buttonColor = 'red';
await this.sleep(1000);
this.buttonColor = 'blue';
},
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
});
app.mount("#app");
</script>
Output of above example
How to Add Delay in Vue Js ?
This is the second example of this tutorial. In the code below, we use methods to implement the 'settimeout' function to wait for the result for one second. You can use the 'tryit' editor to edit and customize the code.
Vue Delay Function Example
Copied to Clipboard
xxxxxxxxxx
<script type="module">
const app = Vue.createApp({
data() {
return {
result: "",
}
},
methods: {
startDelayedAction() {
this.result = "Loading...";
setTimeout(() => {
this.performAction();
}, 1000);
},
performAction() {
this.result = "Action performed!";
},
},
});
app.mount("#app");
</script>
Ad