Posts Learn Components Snippets Categories Tags About
/

Vue Js Prevent Methods and Events From Spamming Using Debounce

Learn how to prevent your methods and events from being executed too frequently using Lodash's debounce function

Created on Sep 11, 2021

14 views

To prevent your Vue Js methods and events from mass spamming / calling too often, you can make use of Lodash's "debounce()" function.

Vue Js debounce Code Example


Below is how you can define the "debounce()" function within your method function body. For this code example, the debounce will execute the function to perform the ajax every 500ms after the input has changed.
<template>
  <input
    type="search"
    v-on:input="filter"
    placeholder="Search..."
  >
</template>

<script>
import { debounce } from 'lodash';

export default {
  methods: {
    filter: debounce(function () {
      // your search ajax here
    }, 500)
  }
}
</script>

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More