如何在 QML 中创建延迟函数?

2022-01-19 00:00:00 delay qml javascript

我想在 javascript 中创建一个延迟函数，它需要一个延迟时间的参数，以便我可以使用它在我的 QML 应用程序中的 JavaScript 行执行之间引入延迟.它可能看起来像这样:

I would like to create a delay function in javascript that takes a parameter of amount of time to delay, so that I could use it do introduce delay between execution of JavaScript lines in my QML application. It would perhaps look like this:

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

我需要函数 delay() 的主体.请注意，JavaScript 的 setTimeout() 在 QML 中不起作用.

I need the body of the function delay(). Note that setTimeout() of JavaScript doesn't work in QML.

推荐答案

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

As suggested in the comments to your question, the Timer component is a good solution to this.

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();

以上将是我目前使用它的方式，以下是我可能在您的问题中实现示例的方式.

The above would be how I'm currently using it, and here's how I might have implemented the example in your question.

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

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

(Which doesn't do anything; read on)

尽管您正在寻找实现它的确切方式表明您正在寻找它以阻塞直到程序的下一行执行.但这不是一个很好的解决方法，因为它还会阻塞您程序中的其他所有内容，因为 JavaScript 仅在单个执行线程中运行.

Though the exact way you are looking for it to be implemented suggests that you are looking for it to block until the next line of your program executes. But this isn't a very good way to go about it as it would also block everything else in your program as JavaScript only runs in a single thread of execution.

另一种方法是传递回调.

An alternative is to pass a callback.

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

这将允许您这样使用它.

Which would allow you to use it as such.

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

希望对你有帮助！

以上假设您正在处理一个单独的 JavaScript 文件，您稍后会将该文件导入到您的 QML 文件中.要直接在 QML 文件中执行等效操作，您可以这样做.

The above assumes you're working in a separate JavaScript file that you later import into your QML file. To do the equivalent in a QML file directly, you can do this.

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.

I'm not convinced that this is the solution to your actual problem however; to delay an animation, you could use PauseAnimation.

相关文章