Playground: slow on Safari

[rauschma]

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.

[jgm]

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.

[rauschma]

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.

[jgm]

Interesting. I use it with Safari on M1 mac and have no issues.

[jgm]

You can try editing the code locally and changing that 8 to a higher number?

[jgm]

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.