Устранение дребезга — это метод программирования, используемый для ограничения скорости вызова функции или события.
Иногда мы не хотим, чтобы функция вызывалась каждый раз, когда происходит ввод данных пользователем (например, предложения в окне поиска, установка/снятие флажков с несколькими флажками, которые обновляют список).
Допустим, у нас есть окно поиска, которое вызывает API и дает нам предложения на основе того, что мы набираем. Проблема с этим сценарием заключается в том, что к API делается запрос для каждого введенного символа, например, если мы набираем слово «Клавиатура». ” он вызовет API восемь раз (из-за длины слова), и это резко повлияет на производительность нашего веб-сайта или приложения.
Вот здесь и пригодится Debounce.
Устранение дребезга позволяет нам отложить вызов метода, указав количество времени, через которое мы хотим, чтобы функция вызывалась. таймер запускается снова и так далее, пока мы не остановимся (в данном случае набрав) на указанное количество времени.
Как использовать в Vue с TypeScript?
В этом посте мы будем использовать пакет typescript-debounce, который позволит нам использовать его в качестве простого декоратора.
Давайте установим его:
npm install --save typescript-debounce
or
yarn add typescript-debounceКак только наш модуль установлен, нам просто нужно импортировать его в компонент Vue TypeScript или в файл main.ts, а затем использовать его в качестве декоратора.
А затем вызовем нашу функцию, как обычно:
Имея это в виду, теперь мы можем оптимизировать наши веб-страницы или приложения.
Вы можете найти больше информации об этом пакете здесь:
У вас есть сценарий, где вы можете реализовать это? Дай мне знать в комментариях. Если это было полезно для вас или вы знаете, кому это может быть полезно, пожалуйста, поделитесь.
