javascript – Async features in loop cease executing after first iteration on iOS

I am attempting to iterate over a string, calling a perform on every letter however with a niche in between every execution (to run keydown and keyup animations for an on-screen keyboard typing a phrase).

I’m looping by means of the string and awaiting and async press perform, which works completely on Home windows and Android, however on iOS the loop stops after the primary iteration (press is known as just for the primary character).

const kind = async (textual content: string) => {
    const characters = textual content.cut up("");
    setTyped("");
    await delay(500);

    for (const character of characters) {
      setTyped((prev: string) => prev + character);
      await press(character, 100);
      await delay(100);
    }
};

press adjustments state with a delay.

const press = async (key: string, period: quantity) => {
    pressDown(key);
    await delay(period);
    pressUp(key);
};

const pressDown = (key: string) => {
    setPressed(key);
};

const pressUp = (key: string) => {
    setPressed(null);
};

I’ve additionally tried a recursive choice, however it additionally doesn’t work on iOS.

const kind = async (textual content: string) => {
    if (textual content.size === 0) return;

    setTyped((prev) => prev + textual content[0]);
    await press(textual content[0], 100)
      .then(() => {
        return delay(100);
      })
      .then(() => {
        kind(textual content.slice(1));
      });
};

Is that this a safety characteristic of iOS or is there an error in my code? Is there any approach round it – or any higher method to loop by means of a listing and name a perform for every object on a timed interval?

Thanks!