Làm thế nào để tạo chức năng trễ trong QML?

Question

Tôi muốn tạo một hàm trễ trong javascript có tham số khoảng thời gian để trì hoãn, để tôi có thể sử dụng nó để giới thiệu độ trễ giữa việc thực thi các dòng javascript trong ứng dụng QML của tôi. Nó có lẽ sẽ giống như thế này:

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

Tôi cần phần thân của hàm delay(). Lưu ý rằng setTimeout() của javascript không hoạt động trong QML.

Answer 1

Như được đề xuất trong các nhận xét cho câu hỏi của bạn, thành phần Timer là giải pháp tốt cho điều này.

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

Ở trên sẽ là cách tôi hiện đang sử dụng và đây là cách tôi có thể đã triển khai ví dụ trong câu hỏi của bạn.

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

(Mà không làm bất cứ điều gì; đọc trên)

Mặc dù cách chính xác mà bạn đang tìm kiếm cho nó được thực hiện cho thấy rằng bạn đang tìm kiếm nó để khối cho đến khi dòng tiếp theo của chương trình của bạn thực hiện. Nhưng đây không phải là một cách rất tốt để đi về nó vì nó cũng sẽ chặn mọi thứ khác trong chương trình của bạn vì JavaScript chỉ chạy trong một chuỗi thực thi duy nhất.

Cách khác là chuyển một cuộc gọi lại.

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

Điều gì sẽ cho phép bạn sử dụng nó như vậy.

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

Hy vọng điều đó sẽ hữu ích!

Chỉnh sửa: Ở trên giả sử bạn đang làm việc trong tệp JavaScript riêng biệt mà sau này bạn nhập vào tệp QML của mình. Để thực hiện tương đương trong một tệp QML trực tiếp, bạn có thể làm điều này.

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

Tôi không tin rằng đây là giải pháp cho vấn đề thực tế của bạn; để trì hoãn hoạt ảnh, bạn có thể sử dụng PauseAnimation.

Answer 2

bạn có thể sử dụng 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) 
    } 
}