Функции throttle и debounce в Vue.js и lodash

Development, Java | Amber | Комментировать запись

Throttling и debouncing – это два подхода, которые позволяют повысить производительность и потенциально снизить нагрузку на сеть.

Vue.js 1 имел встроенную поддержку для debouncing, но в Vue.js 2 она была удалена. В результате для внедрения этих двух техник в Vue.js 2 используются сторонние библиотеки, такие как lodash.

В этом руководстве вы научитесь применять lodash.throttle и lodash.debounce в приложении Vue.js 2.

Требования

• Локальная копия Node.js (установить ее можно, следуя этим инструкциям: Mac OS, Ubuntu, CentOS, Debian).
• Некоторое знакомство с техниками debouncing и throttling.
• Базовые навыки работы с Vue и Lodash иметь полезно, но не обязательно.

Это руководство было проверено на версиях Node v15.8.0, npm v7.5.4, vue v2.6.11 и lodash v4.17.20.

1: Создание тестового проекта

Для быстрой настройки проекта рекомендуется использовать @vue/cli.

Примечание: В этом руководстве мы будем использовать npx, чтобы избежать глобальной установки @vue/cli.

npx @vue/cli create vue-lodash-example

После выбора предустановки (Default ([Vue 2] babel, eslint)) и менеджера пакетов (npm) перейдите в только что созданный каталог проекта:

cd vue-lodash-example

Теперь нам нужно добавить библиотеку lodash в новый проект. Это делается с помощью следующей команды:

npm install lodash

Примечание: Если вам не нужно импортировать всю библиотеку lodash, вы можете настроить webpack, чтобы уменьшить библиотеку до используемых функций. Также можно отдельно импортировать части lodash – для этого существуют пакеты lodash.throttle и lodash.debounce.

Затем с помощью редактора кода создайте файл UnmodifiedComponent.vue в каталоге components и поместите в него следующий код:

<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>

После этого отредактируем App.vue и объявим в нем наш новый UnmodifiedComponent:

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

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

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

Запустим наше приложение Vue.js:

npm run serve

В браузере откройте localhost:8080 и нажмите кнопку – вы увидите, что консоль будет регистрировать все ваши взаимодействия. Эти события будут запускаться немедленно при каждом клике. Мы изменим это, чтобы посмотреть на примере, как работают throttle и debounce.

Методы throttle

Давайте попробуем применить throttle к своему тестовому приложению Vue. Техника throttle гарантирует, что события сохраняются, но разделяются во времени.

Используйте редактор кода, чтобы скопировать UnmodifiedComponent и создать новый файл ThrottleComponent:

<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>

Затем отредактируйте App.vue и добавьте в него ThrottleComponent:

<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>

Теперь вы можете запустить приложение Vue.js:

npm run serve

Откройте localhost:8080 в своем браузере и нажмите на кнопку. Как и раньше, консоль будет регистрировать все ваши взаимодействия. Несколько последовательных событий будут запускаться с задержкой в ​​2000 миллисекунд (2 секунды).

Методы debounce

А теперь давайте посмотрим, как работает debounce в нашем приложении Vue. Debouncing по сути группирует события вместе и предотвращает слишком частый их запуск.

При помощи редактора кода скопируйте UnmodifiedComponent и создайте новый DebounceComponent:

<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>

Затем отредактируйте App.vue, чтобы использовать новый компонент DebounceComponent в приложении:

<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>

Теперь вы можете запустить приложение Vue.js:

npm run serve

Откройте адрес localhost: 8080 в веб-браузере и нажмите на кнопку. Как вы уже видели, консоль будет регистрировать все ваши взаимодействия. На этот раз несколько последовательных событий будут срабатывать только после клика каждые 2000 миллисекунд (2 секунды).

Заключение

В этом руководстве мы на примере показали, как работают lodash.throttle и lodash.debounce в приложении Vue.js 2.

Если вы хотите узнать больше о lodash, прочтите официальную документацию.