💡Debounce the onChange callback

[Teebo]

How can I debounce the onChange callback. I would like to autosave the content from the editor, but I would like to wait a few seconds before the autosave.

I have created a pull request here https://github.com/codex-team/editor.js/pull/1222

[neSpecc]

Why not just debounce on your handler's side?

[Teebo]

@neSpecc I would like to handle the debounce because I am saving the Editor data to Firebase, so I want to limit the number of times the updates are made to a document when the user interacts with the editor.

So If I try the approach you are suggesting all the keyups are being registered and called which causes multiple writes to Firebase

[Teebo]

@neSpecc so if I debounce my handler all the key/up/down will cause my debounced handler to be called multiple times and there is no way to delay that even if I would debounce the handler, it will still be registered multiple times when the editor changes which is not a deboune-able event.

I am not sure If I am making sense

[Teebo]

@neSpecc this is related to https://github.com/codex-team/editor.js/issues/1225

[neSpecc]

all the keyups are being registered and called which causes multiple writes to Firebase

Why? If you'll add a debounce at your onChange handler, you won't save data multiple times.

[Teebo]

@neSpecc I am not sure how to achieve that, would you please assist me, maybe show an example

[sis-dk]

const editor = new EditorJS({
    // Other configuration properties
    onChange: _.debounce(mySaveFunction, 200);
});

[Teebo]

@sis-dk what happens if mySaveFunction is async?

[sis-dk]

@Teebo Doesn't matter. Its autosave right? You can just keep saving from mySaveFunction. Editor doesn't have to wait for the save to finish.

[Teebo]

@sis-dk I will try that out, thank you.

[collimarco]

+1 for having a debounce option (in ms or seconds) in Editor.js to set the frequency of the onchange event.

That is useful for most applications, in order to save the changes