Throttling and Debouncing Events with Vue.js and lodash

Introduction #

Event throttling and debouncing refer to two approaches to improve performance and potentially lower network overhead.
While Vue.js 1 used to have native support for debouncing events, it was removed in Vue.js 2.
As a result, a common approach to throttling and debouncing events in Vue.js 2 is through third-party libraries, like lodash.
In this tutorial, you will apply lodash.throttle and lodash.debounce to a Vue.js 2 application.

Prerequisites #

If you would like to follow along with this article, you will need:

Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
Some familiarity with debouncing and throttling.
Some familiarity with Vue will be beneficial but not required.
Some familiarity with Lodash will be beneficial but not required.

This tutorial was verified with Node v15.8.0, npm v7.5.4, vue v2.6.11, and lodash v4.17.20.

Setting Up the Project #

To quickly set up the project, this article will recommend using @vue/cli.

Note: This article will take the approach of using npx to avoid a global installation of @vue/cli;

npx @vue/cli create vue-lodash-example

After selecting a preset (Default ([Vue 2] babel, eslint)) and package manager (npm), navigate to the newly created project directory;

cd vue-lodash-example

Now, you will want to add lodash to the project with the following command:

npm install lodash

Note: If you do not need to import all of lodash, customizing webpack can reduce the size of the library to the functions that are utilized. It is also possible to import parts of lodash separately, in packages like lodash.throttle and lodash.debounce.

Next, use your code editor to create a new UnmodifiedComponent.vue file in the components directory:
src/components/UnmodifiedComponent.vue

<template>
  <div>
    <h1>Unmodified Events</h1>
    <button @click="unmodifiedMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
export default {
  methods: {
    unmodifiedMethod: () => {
      console.log('Button clicked!')
    }
  }
}
</script>

Next, modify App.vue to use the new UnmodifiedComponent:
src/App.vue

<template>
  <div id="app">
    <UnmodifiedComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent
  }
}
</script>

Now you can run the Vue.js application:

npm run serve

Navigate to localhost:8080 in your web browser and interact with the button in your web browser. The console will log all of your interactions. These events will fire immediately with every click. You will be modifying this method to use throttle and debounce.

Throttling Methods #

Next, you will apply throttle to your Vue application. Throttling can be used to ensure your events are preserved but separated over time.
Use your code editor to copy your UnmodifiedComponent and create a new ThrottleComponent:
ThrottleComponent.vue

<template>
  <div>
    <h1>Throttled Events</h1>
    <button @click="throttleMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    throttleMethod: _.throttle(() => {
      console.log('Throttle button clicked!')
    }, 2000)
  }
}
</script>

Next, modify App.vue to use the new ThrottleComponent:
src/App.vue

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent
  }
}
</script>

Now you can run the Vue.js application:

npm run serve

Navigate to localhost:8080 in your web browser and interact with the button in your web browser. The console will log all of your interactions. Multiple sequential events will fire consistently with a delay of 2000 milliseconds (2 seconds).

Debouncing Methods #

Next, you will apply debounce to your Vue application. Debouncing essentially groups your events together and keeps them from being fired too often.
Use your code editor to copy your UnmodifiedComponent and create a new DebounceComponent:
DebounceComponent.vue

<template>
  <div>
    <h1>Debounced Events</h1>
    <button @click="debounceMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    debounceMethod: _.debounce(() => {
      console.log('Debounce button clicked!')
    }, 2000)
  }
}
</script>

Next, modify App.vue to use the new DebounceComponent:
src/App.vue

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
    <DebounceComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'
import DebounceComponent from './components/DebounceComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent,
    DebounceComponent
  }
}
</script>

Now you can run the Vue.js application:

npm run serve

Navigate to localhost:8080 in your web browser and interact with the button in your web browser. The console will log all of your interactions. Multiple sequential events will only fire after the last click once every 2000 milliseconds (2 seconds).

Conclusion #

In this tutorial, you applied lodash.throttle and lodash.debounce to a Vue.js 2 application.
If you’d like to learn more about lodash, read the the official documentation.
If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.