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

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script

How can a TypeScript Angular directive utilize a function?

Changing selections in jQuery may not work properly on certain mobile and IE browsers

What is the process for configuring aliases in vuepress or vuejs using configureWebpack?

AngularJS: The requested resource does not have the "Access-Control-Allow-Origin" header

The onClick function is failing to work properly, and I need to pass the value of 'cid' based on the result of the button

Learn how to access the media.navigator.enabled value of Firefox using Javascript

Launching PDF on IE11 in a new tab seamlessly without any prompts - mssaveoropenblob

Guide on using Twitter Typeahead.js to capture all matching elements in a specific string

Creating a Vue.js application using Visual Studio Code

Set Divs in Absolute Position Relative to Each Other

Tips for creating a tabbed form that easily glides between tabs

Using Mongoose to calculate and retrieve the total sum of elements within an array

Flowbite components are visually appealing, but unfortunately, the interactions are not functioning properly

Module Ionic not found

The Best Practices section of the Chrome lighthouse report has identified an issue with properly defining the charset

Preventing ReactJS tooltips from exceeding the boundaries of the screen

Ensuring correct association of values to avoid redundancies

Leveraging the power of Vue.js and Jekyll for a multilingual

Implementing dynamic title rendering based on image in vue.js