如何在QML中延迟JavaScript动作？

Question

I am building a C++ application based on QML .

To make it simple :

In my main QML file, I have a button (Rectangle) calling a JavaScript function (defined in an external JS file) when clicked:

// My JS file linked to the main QML window
[...]
function actionOnButtonClicked()
{
    var x = 0;
    var y = 0;
    for(var i = 0; i < 3; i++)
    {
        createObject(x, y);
        x = x + 10;
        y = y + 10;
    } 
}

As you can see, in this function, I call n (= 3 here) times another JS function to dynamically create several QML objects to add to the scene:

function createObject(xPosition, yPosition)
{
    component = Qt.createComponent("Symbol.qml");
    component.createObject(windowApp, {"x": xPosition, "y": yPosition});
}

This is working fine. But the created object (Symbol) appears in the windowApp with a translation animation (around 1sec.), and I would like to wait for the first object's animation to complete before creating the second one...

As we cannot use setTimeOut() JavaScript function in QML, I wonder how I could achieve this. I do not see how I could make use of the QML Timer object or even PauseAnimation...

Does somebody know how to add a delay between 2 QML JavaScript operations ?

Answer 1

I think this QML Timer type can help you achieve what you want.

import QtQuick 2.0
Item {
       Timer {
               interval: 500; running: true; repeat: true
               onTriggered: time.text = Date().toString()
             }

       Text { id: time }
} 

Answer 2

You could probably do it so that you only create one "Symbol" from your button action and trigger a new symbol on some event in the new object. Perhaps the animation ending triggers an event that you could use ?

Answer 3

Its been a while, I have missed QML. But let me try to suggest a solution. I guess this might work, if you are calling that translationAnimation.running = true in Component.onComlpeted event. I have posted a stupid answer before. Now I replace it with a lazy/ugly way to do this. This is probably not the right way to do it, though this code may help your use case.

CreateObject.js

.pragma library

var objects = null;
var objectCount = 0;
var i = 0;
var mainWin;
var x = 0;
var y = 0;

function calledOnbuttonAction(parentWindow)
{
    if(objects === null)
    {
        mainWin = parentWindow;
        x = 0;
        y = 0;
        objects = new Array();
        createObject(x,y);
    }

    else
    {
        if(x <= mainWin.width)
            x = x + 28;
        else
        {
            x = 0;
            if(y <= mainWin.height)
                y = y + 28;
            else
            {
                console.debug("Exceeded window area!")
                return;
            }
        }
        createObject(x,y);
    }

}

function createObject(xPos, yPos)
{
    i++;
    var component = Qt.createComponent("Object.qml");
    objects[objectCount++] = component.createObject(mainWin, {"x": xPos, "y": yPos});
}

main.qml

import QtQuick 1.1
import "CreateObjects.js" as CreateObject

Rectangle {
    id: mainWindow
    width: 360
    height: 360

    Text {
        text: qsTr("Click inside window")
        anchors.centerIn: parent
        font.pixelSize: 18
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            CreateObject.calledOnbuttonAction(mainWindow); //passing the parent window object
        }
    }

}

Object.qml //Symbol in your case

//The Symbol

import QtQuick 1.1
import "CreateObjects.js" as CreateObject
Rectangle {

    id: obj
    width: 25
    height: 25

    gradient: Gradient {
        GradientStop {
            position: 0
            color: "#d11b1b"
        }

        GradientStop {
            position: 1
            color: "#ea4848"
        }
    }

    property alias animationStatus: completedAnimation

    NumberAnimation {
        id: completedAnimation;
        target: obj;
        property: "opacity";
        duration: 800;
        from: 0;
        to: 1.0;
        onRunningChanged: {
            if(!running && CreateObject.i < 900) // Decrease or increase the value according to the number of objects you want to create
            {
                CreateObject.calledOnbuttonAction();
            }
        }
    }

    Component.onCompleted: completedAnimation.running = true;

}