If you have a delay of 1000ms and send three events in rapid succession, it will fire the first event, wait one second and then fire the third event.
yarn add lodash-esyou will be able to use a version of the library that supports tree shaking. This means that Webpack will only grab the minimum code required, keeping your production JS bundle size tiny.
scrollfunction on a Stimulus controller named
event. When the controller is attached to the
divat page load,
connectis fired, StimulusReflex is instantiated and we use the Lodash
debouncefunction to return a new event handler that will execute when the page is scrolled but then stops scrolling for at least a second. We could set a
maxWaitoption if we were worried about users who just won't stop scrolling, but that's as weird as it sounds and qualifies as premature optimisation.
stimulateand pass the current scroll offset of the browser window to the server as an integer argument. The server reflex executes the scroll method and it can do whatever you would like it to do.
throttlewith default parameters has the example same form and syntax as
keyupindicate which key is pressed, while
keypressindicates which character was entered. A lowercase "a" will be reported as 65 by
keyup, but as 97 by
keypress. An uppercase "A" is reported as 65 by all events.
keyupcan be declared on any receiver including
inputevent can only be captured for an
textareaHTML element. Choose the right event depending on your needs.
wto move forward, this is your event.
event.target.valueit gives you the value of the element (usually a text box) before the key was pressed. Many developers have lost many hairs trying to hunt down bugs on their
keydownhandlers; don't make the same mistake.
keydownby testing the
repeatattribute to see if one key is being held down.
keypressreturns the previous value when you access
event.target.value. However, it only fires for keys that product a character value, so for example the Escape key is off-limits, as are
keyupis the direct counterpart of
keydownthere are some important differences.
event.target.valuereturns the value of the text box as it currently appears, with any new changes reflected.
keyupwill not fire if you paste text into an input element. It doesn't care that anything has changed; it's only aware of keys being pressed.
inputevents can be used to manage the state of
inputis fired every time the
valueof the element changes, including when text is pasted.
changeonly fires when the
valueis committed, such as by pressing the enter key or selecting a value from a list of options.
blurfires when focus is lost, even if nothing changed.
inputcannot give you access to non-character keycodes such as Escape. It should not require debounce because the event is not fired until after any change has occurred. You can access
event.target.valueand see the current value of the element.
input(and it's sister event
beforeinput) is that they give you boss powers: the
dataattribute on the event is a string containing the change made, which could be a single character or a pasted novel. Meanwhile, the
inputTypeattribute tells you what kind of change was responsible for the event being fired. With this information, you have the ability to create a timeline log of all changes to a document and even replay them in either direction later.
throttle. We're going to allow the user to mash their keyboard without spamming the server with Reflex updates. However, we only want to throttle if they are holding down a single key: