I use lodash in a Vue 3 project, when I try to use the _.throttle in the setup function, it doesn't work. I writed a demo in the 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>You're missing to run the throttled function by adding the () :
const handleClick = () =>
_.throttle(function () {
console.log('hi');
}, 2000)();
or assign it to a variable then run it :
const handleClick = () =>{
let throttled= _.throttle(function () {
console.log('hi');
}, 2000);
throttled();
}
Okay, I have a solution now. My companion said that omit the () => can fix it, add the { trailing: false } is better.
const handleClick = _.throttle(function () { console.log('hi'); }, 2000, { trailing: false });