QML如何实现sleep延时功能？调用自定义delay函数报错未定义怎么解决？

问题原因 #

• 报错delay is not defined的核心是作用域匹配错误+代码结构缩进混乱：你将delay函数定义在内层Rectangle的作用域下，而代码缩进错误导致ColumnLayout实际从属关系和预期不符，按钮调用函数时找不到对应作用域的方法。此外你现有实现的delay函数存在逻辑缺陷：每次调用都会重复绑定triggered信号，多次点击按钮会重复执行回调。
• 现有业务逻辑顺序完全错误：当前代码点击后会立刻执行stack.push(btnHomepage)完成跳转，设置的5秒延时完全不会生效，且你设置的是延时5秒才显示loading动画，不符合常规交互逻辑。

修复方案 #

1. 标准可复用延时实现 #

调整代码结构将延时工具放到根作用域，修正逻辑顺序，同时避免重复绑定信号的问题：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.15

Component
{
    id: loginComponent
    Rectangle
    {
        // 全局延时定时器，放到根作用域所有子元素都可访问
        Timer 
        {
            id: delayTimer
            repeat: false
            property var callback: null
            onTriggered: {
                if (callback) {
                    callback()
                    callback = null // 执行完自动清空回调，避免残留
                }
            }
        }

        // 全局延时方法
        function delay(delayTime, cb) {
            delayTimer.interval = delayTime
            delayTimer.callback = cb
            delayTimer.restart() // 重启定时器，覆盖上一次未完成的延时请求
        }

        Rectangle
        {
            anchors.fill: parent
            ColumnLayout 
            {
                anchors.fill: parent
                // 其余业务控件省略

                Button
                {
                    onClicked:
                    {
                        // 调用登录接口
                        backend.inloggen(email.text, wachtwoord.text, dropdown.currentText)
                        // 立刻显示loading动画
                        loading_container.visible = true
                        // 延时5秒后执行跳转
                        delay(5000, function() {
                            loading_container.visible = false // 跳转前隐藏loading，可选
                            stack.push(btnHomepage)
                        })
                    }
                }
        
                Rectangle
                {
                    id: loading_container
                    visible: false
                    anchors.centerIn: parent // 让loading居中显示，符合交互习惯
                    AnimatedImage
                    {
                        source: "./images/loading.gif"
                    }
                }
            }
        }
    }
}

2. 轻量临时延时实现 #

如果不需要复用延时功能，可以不用定义全局delay方法，直接在点击事件中创建临时定时器：

Button {
    onClicked: {
        backend.inloggen(email.text, wachtwoord.text, dropdown.currentText)
        loading_container.visible = true
        // 临时定时器，执行完自动销毁
        Timer {
            interval: 5000
            repeat: false
            running: true
            onTriggered: {
                loading_container.visible = false
                stack.push(btnHomepage)
            }
        }
    }
}

注意事项 #

如果你的需求是等待后端登录接口返回后再跳转，不要使用固定时长的定时器，应该绑定后端inloggen接口的完成信号触发跳转，避免网络波动时接口还没返回就提前跳转的问题。

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