对Vue 3使用throttle

Question

我在一个Vue 3项目中使用了lodash，当我尝试在setup函数中使用_.throttle时，它不起作用。我在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>

​

Answer 1

您没有通过添加()来运行限制函数：

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

或者将其赋给一个变量，然后运行它：

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

Answer 2

好了，我现在有解决方案了。我的同伴说省略() =>可以修复它，添加{ trailing: false }更好。

​

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

​