Использование дроссельной заслонки с Vue 3

#vue.js #lodash #vuejs3 #vue-composition-api

Вопрос:

Я использую lodash в проекте Vue 3, но когда я пытаюсь использовать функцию _.throttle in setup , она не работает. Я написал демо-версию в stackblitz.

 <template>
  <div id="app">
    <button @click="handleClick">Click</button>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'App',
  setup() {
    const handleClick = () =>
      _.throttle(function () {
        console.log('hi');
      }, 2000);

    return {
      handleClick,
    };
  },
};
</script> 

Ответ №1:

Вам не хватает для запуска функции регулирования, добавив () :

   const handleClick = () =>
      _.throttle(function () {
        console.log('hi');
      }, 2000)();

 

или назначьте его переменной, а затем запустите ее :

   const handleClick = () =>{
     let throttled= _.throttle(function () {
        console.log('hi');
      }, 2000);
     
     throttled();
   }

 

Ответ №2:

Ладно, теперь у меня есть решение. Мой собеседник сказал, что опустить () => может исправить это, добавить { trailing: false } то, что лучше.

 const handleClick = _.throttle(function () { console.log('hi'); }, 2000, { trailing: false });