Replies: 3 comments
-
Hey Thanks for your feedback, my initial though was to keep a similar API as I published a first beta version that had fixed time for all function. The API is simple with this static array of function name to debounce. @julianrubisch any thought on this as for me ultimately what is important is to be consistent with To get you up to speed without looking in 4 PRs the current API is: export default class extends ApplicationController {
static debounces = ["click", { name: "fetch", wait: 500 }]
connect () {
useDebounce(this)
}
click () {
// this function is debounced with a wait time of 200ms (default).
}
fetch () {
// this function is debounced with a wait time of 500ms.
}
instant () {
// this function is not debounced.
}
} other alternatives connect () {
useDebounce(["click", { name: "fetch", wait: 500 }])
} connect () {
useDebounce([this.click, { function: this.fetch, wait: 500 }])
} |
Beta Was this translation helpful? Give feedback.
-
Hmmm yeah I would probably go with option 1. This mix of plain values with objects in an array is also consistent with common configs such as tailwind etc. |
Beta Was this translation helpful? Give feedback.
-
Ok I had some thoughts over this and discussed it around The API proposed by @marcoroth and/or my suggested alternative usually makes more sens for newcomers into a code base as it is very explicit. Best of both worldUsing a global ApplicationControllerWe can keep the current API but recommend it when there is a global // application_controller.js
export default class extends Controller {
connect () {
useDebounce(this)
}
} // some_controller.js
export default class extends ApplicationController {
static debounces = ["click", { name: "fetch", wait: 500 }]
click () {
// this function is debounced with a wait time of 200ms (default).
}
fetch () {
// this function is debounced with a wait time of 500ms.
}
instant () {
// this function is not debounced.
}
} Per controller definitionWhen not using a global // most basic with default wait time
useDebounce(this.click)
useDebounce(this.fetch)
// default wait time for an array of functions
useDebounce([this.click, this.fetch])
// array of functions with ddefault and custom wait time
useDebounce([this.click, { function: this.fetch, wait: 500 }]) |
Beta Was this translation helpful? Give feedback.
-
Hey @adrienpoly.
I saw you introduced configurable wait times for
useDebounce
anduseThrottle
in #59 and #62. Pretty cool!I just had another idea how we could handle different wait times for different actions. It's a different approach compared to what we saw in the past. The idea is to call the mixin multiple times, but in my opinion this is less cluttery and more expressive.
It also means, that we don't need the
static debounces
array.It's just an idea for a different approach that I wanted to share with you to get your take on it. Would also be the first time that we don't pass an actual controller to a mixin. I don't know how it would affect the consistency of the overall api, but maybe we can also support both for even more flexibility.
Beta Was this translation helpful? Give feedback.
All reactions