1. 实现功能
QML
项目中,点击一个按键后,运行一段比较耗时的程序,此时ui线程
会卡住。如何避免ui线程
卡住。
2. 单线程(会卡住)
2.1 界面
2.2 现象
- 点击
delay btn
后,执行耗时函数(TestJs.func_delay()
)界面阻塞(阻塞了12s
),等待运行完成后,点击ui btn
才能响应。
qml: 2024-11-14 09:48:29 ui thread
qml: 2024-11-14 09:48:30 click delay btn
qml: delay thread 2024-11-14 09:48:42
qml: 2024-11-14 09:48:42 ui thread
2.3 main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import "test.js" as TestJsWindow {width: 640height: 480visible: truetitle: qsTr("Thread")Row{spacing: 20Button{width: 200height: 100text: "ui btn"onClicked: {console.log(Qt.formatDateTime(new Date(), "yyyy-MM-dd HH:mm:ss"), "ui thread")}}Button{width: 200height: 100text: "delay btn"onClicked: {console.log(Qt.formatDateTime(new Date(), "yyyy-MM-dd HH:mm:ss"), "click delay btn")TestJs.func_delay()}}}
}
2.4 test.js
//耗时函数
function func_delay() {var cnt = 0;for(let i=0; i<1000000000; i++){cnt++;}console.log("delay thread", Qt.formatDateTime(new Date(),"yyyy-MM-dd HH:mm:ss"))
}
3. 多线程(WorkerScript
方式)
3.1 界面
3.2 现象
- 将耗时函数(
func_delay()
)放到WorkerScript.onMessage
中执行,这样ui线程不会阻塞。 - ui线程与delay线程直接可以通讯,发送通过
sendMessage
,接收通过onMessage
qml: 2024-11-14 09:54:11 ui thread
qml: 2024-11-14 09:54:11 click delay btn-1
qml: 2024-11-14 09:54:11 click delay btn-2
qml: 2024-11-14 09:54:12 ui thread
qml: 2024-11-14 09:54:13 ui thread
js: delay thread 2024-11-14 09:54:23
js: ui thread -> delay thread: Hello, I am ui thread.
qml: delay thread -> ui thread: Hello, I am delay thread.
3.3 main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import "test.js" as TestJsWindow {width: 640height: 480visible: truetitle: qsTr("Thread")Row{spacing: 20Button{width: 200height: 100text: "ui btn"onClicked: {console.log(Qt.formatDateTime(new Date(), "yyyy-MM-dd HH:mm:ss"), "ui thread")}}Button{width: 200height: 100text: "delay btn"onClicked: {console.log(Qt.formatDateTime(new Date(), "yyyy-MM-dd HH:mm:ss"), "click delay btn-1")//发送数据myWorker.sendMessage({'msg': 'Hello, I am ui thread.'})console.log(Qt.formatDateTime(new Date(), "yyyy-MM-dd HH:mm:ss"), "click delay btn-2")}}WorkerScript{id: myWorkersource: "test.js"//接收数据onMessage: {console.log("delay thread -> ui thread: ", messageObject.msg)}}}
}
3.4 test.js
function func_delay() {var cnt = 0;for(let i=0; i<1000000000; i++){cnt++;}console.log("delay thread", Qt.formatDateTime(new Date(),"yyyy-MM-dd HH:mm:ss"))
}WorkerScript.onMessage = function(message){func_delay()console.log("ui thread -> delay thread: ", message.msg)//发送数据WorkerScript.sendMessage({'msg': 'Hello, I am delay thread.'})
}
参考
Qt 之 qml WorkerScript使用