Avoiding future clicks with a delay in VUE: A guide

Question

Avoiding future clicks with a delay in VUE: A guide

Is there a way to prevent the next click for 600ms after an initial click? I want to temporarily "disable" all a tags for 600ms after one is clicked. Any help would be appreciated.

VUE

  
  <ul>
    <li v-for="item in navigation" :key="item" :title="item.name">
      <router-link :to="item.path" @click="delay()">{{ item.name }}</router-link>
    </li>
  </ul>

delay()

  
  methods: {
    delay() {
      this.event.preventDefault();
    }
  }

EDIT I have made some changes. Now, I want each button to be disabled for 600ms after being clicked before becoming active again. The router should not be included in this timer. I tried something like this but the buttons remain permanently disabled


<ul>
  <li v-for="item in navigation" :key="item" :title="item.name">
    <button type="button" disabled="false" @click="delay(item.path)">{{ item.name }}</button>
  </li>
</ul>

method


methods: {
  delay(to) {
    this.$router.push(to);
    setTimeout(() => this.disabled = true, 600)
  },
},

javascript vue.js

Answer 1

Answer №1

If you want to control the link enable/disable behavior, consider using setTimeout in the following way:

<a :disabled="!linkEnabled" href="javascript:void(0)" @click="delay(item.path)">{{ item.name }}</a>

Here is how you can implement it in your function:

delay(to) {
    this.linkEnable = false;
    this.$router.push(to);
    setTimeout(() => this.linkEnable = true, 600)
}

Answer 2

If you want to control the link enable/disable behavior, consider using setTimeout in the following way:

<a :disabled="!linkEnabled" href="javascript:void(0)" @click="delay(item.path)">{{ item.name }}</a>

Here is how you can implement it in your function:

delay(to) {
    this.linkEnable = false;
    this.$router.push(to);
    setTimeout(() => this.linkEnable = true, 600)
}

Answer 3

Answer №2

If you want to create a router, you can set up routes and use the beforeEach method to listen for router changes and pause for a specified amount of time.

const routes = [{
    path: "/login",
    name: "Login Component",
    component: LoginComponent
}]
const router = new createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    // Add in your waiting logic here before moving to the next route
}

export default router;

For more information on Vue Router, check out Vue Router documentation

Answer 4

If you want to create a router, you can set up routes and use the beforeEach method to listen for router changes and pause for a specified amount of time.

const routes = [{
    path: "/login",
    name: "Login Component",
    component: LoginComponent
}]
const router = new createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    // Add in your waiting logic here before moving to the next route
}

export default router;

For more information on Vue Router, check out Vue Router documentation

Avoiding future clicks with a delay in VUE: A guide

Answer №1

Answer №2

Similar questions

What are the steps to connect to multiple databases with ExpressJS?

Move the modelValue logic to a composable function

What is the most efficient way to align a localStorage variable with its corresponding page?

Guide me on setting up a progress bar using the XHR function to display the upload percentage

Storing the result of parsing JSON data into a global variable

Create a new array by dynamically generating a key while comparing two existing arrays

What is a memory-saving method to clear an object in JavaScript?

Unable to retrieve content using the query.ID in Next.js

What is the purpose behind enclosing a function expression in parentheses in JavaScript (apart from creating an IIFE)?

Web scraping with Cheerio in Node.js sometimes yields undefined results

The success method in the observable is failing to trigger

How do useCases interact with each other within Clean Architecture principles in NodeJS?

"Accessing your account only requires a simple two-click login process

The console is showing the Ajax Get request being logged, but for some reason it is not displaying on the

Switch out the arrow icon in the dropdown menu with an SVG graphic

What is the purpose of the "Dot" symbol in the "runtimeArgs" property of the launch.json file in Visual Studio Code?

Stop user from navigating to specific route using React-router

Express.js continues to retrieve outdated query results that have already been removed from the database

Maintaining a reference to an element while binding event handlers in a prototype

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed