Swift中DispatchQueue多次执行后弹窗无法自动消失问题求助

我编写了一段Swift代码，实现点击按钮显示提示弹窗并在2秒后自动消失的功能。前1-3次点击一切正常，但超过3次后，弹窗无法按预期自动消失。相关代码如下：

struct ContentView: View {
    @State var showingNotice = false

    var body: some View {
        ZStack {
            Button(action: {
                self.showingNotice = true
            }, label: {
                Text("Show Notice")
            })

            if showingNotice {
                FloatingNotice(showingNotice: $showingNotice)
            }
        }
        .animation(.easeInOut(duration: 1))
    }
}

struct FloatingNotice: View {
    @Binding var showingNotice: Bool

    var body: some View {
        VStack (alignment: .center, spacing: 8) {
            Image(systemName: "checkmark")
                .foregroundColor(.white)
                .font(.system(size: 48, weight: .regular))
                .padding(EdgeInsets(top: 20, leading: 5, bottom: 5, trailing: 5))
        
            Text("Review added")
                .foregroundColor(.white)
                .font(.callout)
                .padding(EdgeInsets(top: 0, leading: 10, bottom: 5, trailing: 10))
        }
        .background(Color.snackbar.opacity(0.75))
        .cornerRadius(5)
        .transition(.scale)
        .onAppear(perform: {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2, execute: {
                self.showingNotice = false
            })
        })
    }
}

问题原因分析 #

核心问题在于**onAppear触发时机不稳定+延迟任务累积干扰**：

• 快速重复点击按钮时，showingNotice被频繁切换为true，SwiftUI的视图复用/更新机制可能导致FloatingNotice的onAppear没有被重新触发（比如弹窗还没完全消失就被再次显示），新的2秒延迟任务无法生成。
• 之前生成的旧延迟任务仍会在后台执行，当旧任务触发时会强制把showingNotice设为false，但如果此时用户刚点击按钮显示新弹窗，就会出现"弹窗刚显示就被关闭"的情况；如果后续onAppear未触发，就会导致弹窗一直停留在界面上。

解决方案 #

方案1：用Task绑定视图生命周期（iOS 15+） #

SwiftUI的Task会和视图生命周期绑定，视图消失时任务会自动取消，彻底避免旧任务干扰：

struct FloatingNotice: View {
    @Binding var showingNotice: Bool

    var body: some View {
        VStack (alignment: .center, spacing: 8) {
            Image(systemName: "checkmark")
                .foregroundColor(.white)
                .font(.system(size: 48, weight: .regular))
                .padding(EdgeInsets(top: 20, leading: 5, bottom: 5, trailing: 5))
        
            Text("Review added")
                .foregroundColor(.white)
                .font(.callout)
                .padding(EdgeInsets(top: 0, leading: 10, bottom: 5, trailing: 10))
        }
        .background(Color.snackbar.opacity(0.75))
        .cornerRadius(5)
        .transition(.scale)
        .task {
            try? await Task.sleep(nanoseconds: 2_000_000_000)
            showingNotice = false
        }
    }
}

方案2：手动管理Timer兼容低版本（iOS 14及以下） #

通过onDisappear主动取消Timer，避免旧任务残留：

struct FloatingNotice: View {
    @Binding var showingNotice: Bool
    private var timer: Timer?

    var body: some View {
        VStack (alignment: .center, spacing: 8) {
            // 弹窗内容保持不变
            Image(systemName: "checkmark")
                .foregroundColor(.white)
                .font(.system(size: 48, weight: .regular))
                .padding(EdgeInsets(top: 20, leading: 5, bottom: 5, trailing: 5))
        
            Text("Review added")
                .foregroundColor(.white)
                .font(.callout)
                .padding(EdgeInsets(top: 0, leading: 10, bottom: 5, trailing: 10))
        }
        .background(Color.snackbar.opacity(0.75))
        .cornerRadius(5)
        .transition(.scale)
        .onAppear {
            timer = Timer.scheduledTimer(withTimeInterval: 2, repeats: false) { _ in
                showingNotice = false
            }
        }
        .onDisappear {
            timer?.invalidate()
            timer = nil
        }
    }
}

额外优化：限制按钮重复点击 #

给按钮添加短时间禁用逻辑，从源头避免重复触发问题：

struct ContentView: View {
    @State var showingNotice = false
    @State var isButtonDisabled = false

    var body: some View {
        ZStack {
            Button(action: {
                showingNotice = true
                isButtonDisabled = true
                // 弹窗显示期间禁用按钮
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    isButtonDisabled = false
                }
            }, label: {
                Text("Show Notice")
            })
            .disabled(isButtonDisabled)

            if showingNotice {
                FloatingNotice(showingNotice: $showingNotice)
            }
        }
        .animation(.easeInOut(duration: 1), value: showingNotice)
    }
}

注意：原代码中的全局.animation建议加上value参数，明确绑定showingNotice状态，避免不必要的动画触发。

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