iOS环境下循环中的Async函数仅执行首次迭代后停止

问题描述 #

实现屏幕键盘输入动画：遍历字符串每个字符，依次触发keydown/keyup状态，通过async/await控制执行间隔。该逻辑在Windows、Android上正常，但iOS中循环仅执行第一次迭代（仅第一个字符触发press）。

相关代码如下：

循环实现版本 #

const type = async (text: string) => {
    const characters = text.split("");
    setTyped("");
    await delay(500);

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

Press函数实现 #

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

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

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

递归实现版本（iOS同样失效） #

const type = async (text: string) => {
    if (text.length === 0) return;

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

疑问：这是iOS安全特性限制，还是代码问题？有没有解决方法或更优的定时遍历执行方案？

原因分析 #

这不是iOS的安全特性限制，核心问题是React状态更新触发组件重渲染，打断了异步循环/递归的执行上下文。

iOS Safari对异步任务调度的规则更严格，当setTyped/setPressed触发组件重渲染时，原async函数的执行上下文会被中断，后续迭代/递归无法继续执行。

解决方法 #

1. 用useRef保存遍历状态，避免上下文丢失 #

将字符列表、当前遍历索引存入useRef，组件重渲染时不会重置这些变量，保证异步任务的上下文稳定：

import { useRef } from 'react';

const type = async (text: string) => {
    const charactersRef = useRef(text.split(""));
    const indexRef = useRef(0);
    
    setTyped("");
    await delay(500);

    const processNext = async () => {
        if (indexRef.current >= charactersRef.current.length) return;
        
        const character = charactersRef.current[indexRef.current];
        setTyped(prev => prev + character);
        await press(character, 100);
        await delay(100);
        
        indexRef.current += 1;
        processNext();
    };
    
    processNext();
};

2. 改用setInterval控制遍历流程 #

用定时器替代async/await链式调用，脱离React状态更新的上下文干扰：

const type = (text: string) => {
    const characters = text.split("");
    let index = 0;
    
    setTyped("");
    // 初始等待500ms后启动定时器
    setTimeout(() => {
        const timer = setInterval(async () => {
            if (index >= characters.length) {
                clearInterval(timer);
                return;
            }
            
            const character = characters[index];
            setTyped(prev => prev + character);
            await press(character, 100);
            
            index += 1;
        }, 200); // 100ms press时长 + 100ms间隔 = 200ms周期
    }, 500);
};

3. 稳定状态更新函数的引用 #

用useCallback包裹状态更新相关函数，避免组件重渲染时函数引用变化导致异步任务异常：

import { useCallback } from 'react';

const pressDown = useCallback((key: string) => {
    setPressed(key);
}, []);

const pressUp = useCallback((key: string) => {
    setPressed(null);
}, []);

const press = useCallback(async (key: string, duration: number) => {
    pressDown(key);
    await delay(duration);
    pressUp(key);
}, [pressDown, pressUp]);

更优方案：结合requestAnimationFrame实现流畅动画 #

利用浏览器的动画帧API，配合useRef保存状态，既保证动画流畅性，又避免异步任务调度限制：

import { useRef } from 'react';

const type = (text: string) => {
    const characters = text.split("");
    const indexRef = useRef(0);
    const startTimeRef = useRef<number | null>(null);
    
    setTyped("");
    
    const animate = (timestamp: number) => {
        if (!startTimeRef.current) {
            startTimeRef.current = timestamp;
        }
        
        // 处理初始500ms等待
        if (timestamp - startTimeRef.current < 500) {
            requestAnimationFrame(animate);
            return;
        }
        
        if (indexRef.current >= characters.length) return;
        
        const character = characters[indexRef.current];
        // 触发按键按下状态
        setPressed(character);
        // 保持按下状态100ms后抬起，更新输入文本
        setTimeout(() => {
            setPressed(null);
            setTyped(prev => prev + character);
            indexRef.current += 1;
            // 间隔100ms后继续下一个字符
            setTimeout(() => requestAnimationFrame(animate), 100);
        }, 100);
    };
    
    requestAnimationFrame(animate);
};

内容的提问来源于stack exchange，提问作者bevans