Playground: slow on Safari
Opened this issue · 5 comments
Currently, typing is slowed down. Does the code parse and render after every keystroke?
If yes then you could wait until the user pauses typing – e.g., like this:
const input = document.getElementById('my-input');
let timeout = null;
input.addEventListener('keyup', () => {
if (timeout !== null) {
clearTimeout(timeout);
}
timeout = setTimeout(
() => {
timeout = null;
console.log('Parse and render:', textInput.value);
},
1000); // wait 1 second
});
- The above is a slightly improved version of the code shown and demoed here: https://schier.co/blog/wait-for-user-to-stop-typing-using-javascript
- I prefer this behavior even if typing weren’t slow – it feels better to me.
- You can experiment with waiting longer than 1000 milliseconds.
There's already a debounce function. The debounce time is determined dynamically as follows:
var elapsedTime = endTime - startTime;
debounceMs = elapsedTime * 8;
The factor could be increased, but it doesn't feel laggy to me.
Ah, I should have checked other browsers:
- This is only an issue in Safari (Mac with M1 Pro processor) – where I can type faster than my input is being processed. The playground works fine in Chrome and Firefox.
- The CommonMark Dingus does not have this issue in Safari. It’s very responsive there.
Interesting. I use it with Safari on M1 mac and have no issues.
You can try editing the code locally and changing that 8 to a higher number?
Also try with a large file and make sure the debounce is kicking in. When I try it with 240K file, I see exactly the behavior you're requesting -- I type and then when I stop, it renders. That's because the debounce time is determined dynamically based on how long it takes to parse and render the document.