如何在QML中创建延迟功能？

Question

我想在javascript中创建一个延迟函数,它接受延迟时间量的参数,这样我就可以使用它确实引入了我的QML应用程序中javascript行执行之间的延迟.它可能看起来像这样:

function delay(delayTime) {
// code to create delay
}

我需要功能的主体delay().请注意,setTimeout()javascript在QML中不起作用.

Answer 1

正如您对问题的评论中所建议的那样,Timer组件是一个很好的解决方案.

function Timer() {
    return Qt.createQmlObject("import QtQuick 2.0; Timer {}", root);
}

timer = new Timer();
timer.interval = 1000;
timer.repeat = true;
timer.triggered.connect(function () {
    print("I'm triggered once every second");
})

timer.start();

以上就是我目前正在使用它的方式,这就是我在你的问题中实现这个例子的方法.

function delay(delayTime) {
    timer = new Timer();
    timer.interval = delayTime;
    timer.repeat = false;
    timer.start();
}

(什么都不做;请继续阅读)

虽然您正在寻找它的确切方式表明您正在寻找它阻止,直到程序的下一行执行.但这不是一个非常好的方法,因为它也会阻止程序中的其他所有内容,因为JavaScript只在单个执行线程中运行.

另一种方法是传递回调.

function delay(delayTime, cb) {
    timer = new Timer();
    timer.interval = delayTime;
    timer.repeat = false;
    timer.triggered.connect(cb);
    timer.start();
}

哪个允许你这样使用它.

delay(1000, function() {
    print("I am called one second after I was started.");
});

希望能帮助到你!

编辑:以上假设您正在使用单独的JavaScript文件,以后将其导入QML文件.要直接在QML文件中执行等效操作,可以执行此操作.

import QtQuick 2.0

Rectangle {
    width: 800
    height: 600

    color: "brown"

    Timer {
        id: timer
    }

    function delay(delayTime, cb) {
        timer.interval = delayTime;
        timer.repeat = false;
        timer.triggered.connect(cb);
        timer.start();
    }

    Rectangle {
        id: rectangle
        color: "yellow"
        anchors.fill: parent
        anchors.margins: 100
        opacity: 0

        Behavior on opacity {
            NumberAnimation {
                duration: 500
            }
        }
    }

    Component.onCompleted: {
        print("I'm printed right away..")
        delay(1000, function() {
            print("And I'm printed after 1 second!")
            rectangle.opacity = 1
        })
    }
}

但我不相信这是解决你实际问题的方法; 要延迟动画,可以使用PauseAnimation.

Answer 2

马库斯的回答完成了这项工作,但有一个大问题.

问题是triggered即使在触发一次之后回调也会保持与信号的连接.这意味着如果再次使用该延迟功能,定时器将再次触发所有连接的回调.所以你应该在触发后断开回调.

这是我增强版的延迟功能:

Timer {
    id: timer
    function setTimeout(cb, delayTime) {
        timer.interval = delayTime;
        timer.repeat = false;
        timer.triggered.connect(cb);
        timer.triggered.connect(function release () {
            timer.triggered.disconnect(cb); // This is important
            timer.triggered.disconnect(release); // This is important as well
        });
        timer.start();
    }
}

...

timer.setTimeout(function(){ console.log("triggered"); }, 1000);