How to delay JavaScript in QML?

Question

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

To make it simple:

In my main QML file, I have a (Rectangle) button that calls 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) once 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}); } 

It works great. But the created object (Symbol) appears in windowApp with the translation animation (about 1 second), and I would like to wait until the completion of the first animation of the object before creating the second ...

Since we cannot use the JavaScript function setTimeOut () in QML, I am wondering how I could achieve this. I do not see how I can use the QML Timer object or even PauseAnimation ...

Does anyone know how to add a delay between two JavaScript QML actions?

Answer 1

I think this type of QML timer 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

Perhaps you could do this so that you only create one “symbol” from the action of your button and trigger a new symbol on some event of a new object. Perhaps the completion of the animation triggers an event that you could use?

Answer 3

Some time passed, I skipped QML. But let me try to suggest a solution. I think this might work if you raise this translationAnimation.running = true event in Component.onComlpeted . I already wrote a stupid answer. Now I am replacing it with the lazy / ugly way of doing this. This is probably the wrong way to do this, although this code may help you to use it.

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; }