Javascript 在 QML 中等待

Question

我在QML中有两个javascript函数fun1，fun2，想要一个接一个（fun2）执行（fun1）完成，更准确地说，我如何启动fun2()之后ImageReader 中的 fun1 已完成。 ImageReader是通过继承QImageProvider用C++编写的函数，如下：

function fun1(){
    ImageReader.magic(photo);
}
function fun2(){
    myImg.source = ""; 
    myImg.source = "image://ImageReader";
}
fun1();
fun2();

使用场景是我想用C++处理一张图片，处理完成后，通过QML Image项显示出来。

Answer 1

好的，我只是想为那些将寻找相同解决方案的人总结一下。

至少有两种方法可以做到这一点：

• 任务完成后从 C++ 对象发出信号。
• 将 JS 函数传递给 C++，任务完成后将调用该函数。

测试 C++ 对象声明：

class MyItem : public QObject
{
    Q_OBJECT

public:
    MyItem(QObject *parent = 0);
    Q_INVOKABLE void someAsyncFunc();
    Q_INVOKABLE void someAnotherAsyncFunc(QJSValue value);

signals:
    void someAsyncFuncFinished();
};

测试 C++ 对象实现：

MyItem::MyItem(QObject *parent) :
QObject(parent) {}

void MyItem::someAsyncFunc()
{
    // do some work here
    emit someAsyncFuncFinished();
}

void MyItem::someAnotherAsyncFunc(QJSValue value) {
    // do some work here
    if (value.isCallable()) {
        value.call();
    }
}

将自定义项注册为单例：

static QObject *my_singleton_provider(QQmlEngine *engine, QJSEngine *scriptEngine)
{
    Q_UNUSED(engine)
    Q_UNUSED(scriptEngine)
    static MyItem *item = nullptr;
    if(!item)
        item = new MyItem();
    return item;
}

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    qmlRegisterSingletonType<MyItem>("Qt.MyTest", 1, 0, "MyItem", my_singleton_provider);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

还有 QML 文件来测试它：

1.任务完成时触发信号

Item {
    id: testItem

    function func1()
    {
        console.log("func1 executing...")
        MyItem.someAsyncFuncFinished.connect(func2);
        MyItem.someAsyncFunc();
    }

    function func2()
    {
        console.log("func2 executing...")
    }

    Component.onCompleted: func1();
}

2.将 JS 函数传递给 C++：

Item {
    id: testItem

    function func1()
    {
        console.log("func1 executing...")
        MyItem.someAnotherAsyncFunc(func2);
    }

    function func2()
    {
        console.log("func2 executing...")
    }

    Component.onCompleted: func1();
}

Answer 2

基本上你有两种方法来解决这个问题

1. 让异步进程通知它正在完成
2. 投票结果的可用性

我不推荐第二种方法，尤其是在声明式环境中，所以让我们进一步研究选项一。

对于 C++ 和 QML/JavaScript 之间的通知，您基本上有两个选择

1. 使用QObject 信号机制
2. 将 JavaScript 回调传递给 C++ 并从那里调用

Qt 的异步 QML API 通常使用前者完成，但如果您更喜欢后者，请查看 QJSValue 作为用于回调参数的 C++ 数据类型。

Answer 3

我对 QML 了解不多，我认为在普通的 JavaScript 中你的代码应该可以工作。但如果它不按顺序调用，我可以建议你这种丑陋的方式：

function fun1() {
    ImageReader.magic(photo);
    return 1;
}
function fun2(wait){
    if(wait==1)
    {
        myImg.source = ""; 
        myImg.source = "image://ImageReader";
    }
}
fun2(fun1());