如何使用Combine Publisher实现事件的最小间隔输出？

问题说明 #

开发动画时，需要并行加载多张图片，要求无论加载完成顺序或速度如何，都能每隔约一秒显示一张，避免图片随机弹出。尝试使用.throttle(for: .seconds(1))实现，但未达到预期：仅输出前两个间隔一秒的元素，后续元素丢失。以下是复现问题的示例代码（用字符串加载模拟图片加载）：

@Observable
class StringLoadModel {
    @MainActor var loadedStrings: [String] = []
    private var cancellables = Set<AnyCancellable>()
    
    func fakeStringLoad(num: Int) async -> String {
        try? await Task.sleep(for: .milliseconds(Int.random(in: 0...400)))
        return "\(num)"
    }
    
    init() {
        Task {
            [1, 2, 3, 4, 5]
                .publisher
                .asyncMap { [weak self] num in
                    return await self?.fakeStringLoad(num: num) ?? ""
                }
                .throttle(for: .seconds(1), scheduler: RunLoop.main, latest: false)
                .sink(receiveValue: { [weak self] str in
                    Task { @MainActor in
                        self?.loadedStrings.append(str)
                    }
                })
                .store(in: &cancellables)
        }
    }
}

struct LoadView: View {
    @State var model: StringLoadModel? = nil
    var body: some View {
        Text("\(model?.loadedStrings ?? [])")
            .task {
                model = StringLoadModel()
            }
    }
}

问题原因 #

.throttle的作用是在指定时间窗口内仅输出一个元素（latest: false取窗口内第一个元素，latest: true取最后一个），超出窗口的元素会被直接丢弃。而我们的需求是保留所有加载完成的元素，仅控制它们的显示间隔，因此throttle完全不适用。

解决方案 #

要实现“所有元素按加载完成顺序，每隔至少一秒显示”的效果，可通过flatMap(maxPublishers: .max(1))配合delay操作符：限制同时处理的元素数量为1，每个元素延迟1秒后输出，确保元素依次间隔显示。

修改后的StringLoadModel初始化代码如下：

init() {
    Task {
        [1, 2, 3, 4, 5]
            .publisher
            .asyncMap { [weak self] num in
                return await self?.fakeStringLoad(num: num) ?? ""
            }
            // 限制并发输出数为1，每个元素延迟1秒后发送
            .flatMap(maxPublishers: .max(1)) { str in
                Just(str)
                    .delay(for: .seconds(1), scheduler: RunLoop.main)
            }
            .sink(receiveValue: { [weak self] str in
                Task { @MainActor in
                    self?.loadedStrings.append(str)
                }
            })
            .store(in: &cancellables)
    }
}

逻辑说明 #

1. asyncMap保持并行加载所有元素，确保加载效率不受影响；
2. flatMap(maxPublishers: .max(1))确保同一时间仅处理一个待显示的元素；
3. delay(for: .seconds(1))让每个元素在进入处理队列后，延迟1秒再输出，从而实现间隔显示。

如果希望元素按原始顺序（而非加载完成顺序）间隔显示，可将asyncMap替换为map结合Task，并使用collect()或zip来保持顺序，但这样会牺牲并行加载的效率，需根据需求权衡。

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