javascript - ¿Cómo crear la función de retardo en QML?

delay

Question

Me gustaría crear una función de retardo en javascript que tome un parámetro de tiempo para demorar, de modo que pueda usarla para introducir un retardo entre la ejecución de líneas de javascript en mi aplicación QML. Tal vez se vería así:

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

Necesito el cuerpo de la función delay() . Tenga en cuenta que setTimeout() de javascript no funciona en QML.

Answer 1

Como se sugiere en los comentarios a su pregunta, el componente Timer es una buena solución para esto.

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

Lo anterior sería cómo lo estoy usando actualmente, y aquí es cómo podría haber implementado el ejemplo en su pregunta.

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

(Que no hace nada; sigue leyendo)

Aunque la forma exacta en que lo está buscando para implementarlo sugiere que lo está buscando para bloquear hasta que se ejecute la siguiente línea de su programa. Pero esta no es una muy buena manera de hacerlo, ya que también bloquearía todo lo demás en su programa, ya que JavaScript solo se ejecuta en un único hilo de ejecución.

Una alternativa es pasar una devolución de llamada.

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

Lo que le permitiría usarlo como tal.

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

¡Espero eso ayude!

Edición: lo anterior supone que está trabajando en un archivo JavaScript independiente que luego importará a su archivo QML. Para hacer el equivalente en un archivo QML directamente, puede hacer esto.

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

Sin embargo, no estoy convencido de que esta sea la solución a su problema real; para retrasar una animación, puedes usar PauseAnimation .

Answer 2

La respuesta de Marcus hace el trabajo, pero hay un gran problema .

El problema es que la devolución de llamada se mantiene conectada a la señal triggered incluso después de activarse una vez. Esto significa que si usa esa función de demora nuevamente, el temporizador activará todas las devoluciones de llamada conectadas antes nuevamente. Por lo que debe desconectar la devolución de llamada después de activado.

Esta es mi versión mejorada de la función de retardo:

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

Answer 3

puedes usar QtTest

import QtTest 1.0
import QtQuick 2.9
ApplicationWindow{
id: window
TestEvent {
id: test
}
function delay_ms(delay_time) {
test.mouseClick(window, 0, 0, Qt.NoButton, Qt.NoModifier, delay_time)
}
}