- Status: accepted
- Deciders: Pietro
- Date: 2019-01-24
The issue is how often to save to local storage when a user types, previous implementation saved every 5 characters. But that caused issues #86
- A simple and straight forward way to save to local storage
- saving on a good frequency
- without introducing performance issues especially on less performant devices
- if possible without introducing third party dependencies
- loadash debounce
- using a js timer
## Notes on debounce option
What is a debounce function?
debounce function does, it limits the rate at which a function can fire. [...] You'll pass the debounce function the function to execute and the fire rate limit in milliseconds
from https://john-dugan.com/javascript-debounce/
In more detail
https://davidwalsh.name/javascript-debounce-function
with examples
https://css-tricks.com/debouncing-throttling-explained-examples/
https://lodash.com/docs/4.17.11#debounce
Chosen option: using a js timer.
It uses a timer that can be consolidated into one final one rather then having a lot of saves being delayed, we just have one final save once after user has stopped typing for more then 5 seconds.
The timer is cleared before being called so that there is only the final one left. Leaving only one final save at the end. As a performance optimization.
if (this.saveTimer!== undefined) {
clearTimeout(this.saveTimer);
}
this.saveTimer = setTimeout(() => {
this.localSave(this.props.mediaUrl);
}, 5000);