qml demo分析(threading-线程任务)

 1 Rectangle {
 2     color: "white"
 3     width: 200
 4     height: 300
 5 
 6     ListView {
 7         anchors.fill: parent
 8         model: listModel
 9         delegate: Component {
10             Text { text: time }
11         }
12 
13         ListModel { id: listModel }
14 
15         WorkerScript {
   
   //在新线程执行操作，不阻塞ui线程，在父线程使用sendMessage发送消息 在子线程使用onMessage处理
16             id: worker
17             source: "dataloader.js" //加载js文件
18         }
19 
20 // ![0]
21         Timer {
22             id: timer
23             interval: 2000; 
24             repeat: true
25             running: true
26             triggeredOnStart: true//定时器开始执行一次   默认该值为false 定时器开始不执行 等过interval后才执行
27 
28             onTriggered: {
29                 var msg = {
   
   'action': 'appendCurrentTime', 'model': listModel};
30                 worker.sendMessage(msg);//在新线程里执行该操作 不阻塞ui线程 
31             }
32         }
33 // ![0]
34     }
35 }

1 WorkerScript.onMessage = function(msg) {
2     if (msg.action == 'appendCurrentTime') {
   
   //如果是指定动作 
3         var data = {
   
   'time': new Date().toTimeString()};//获取当前时间
4         msg.model.append(data);//list添加新数据
5         msg.model.sync();   // 更新数据到ui
6     }
7 }

 1 WorkerScript {
 2         id: myWorker
 3         source: "workerscript.js"//指定js文件
 4 
 5         onMessage: {
   
   //接收js文件发送的sendMessage消息
 6             if (messageObject.row == rowSpinner.value && messageObject.column == columnSpinner.value){ //Not an old result
 7                 if (messageObject.result == -1)
 8                     resultText.text = "Column must be <= Row";
 9                 else
10                     resultText.text = messageObject.result;
11             }
12         }
13     }
14 //! [1]
15     Row {
   
   //水平方向上的两个可以滚动的仪表框
16         y: 24
17         spacing: 24
18         anchors.horizontalCenter: parent.horizontalCenter
19 //! [0]
20         Spinner {
21             id: rowSpinner
22             label: "Row"
23             onValueChanged: {
24                 resultText.text = "Loading...";
25                 myWorker.sendMessage( { row: rowSpinner.value, column: columnSpinner.value } );
26             }
27         }
28 //! [0]
29 
30         Spinner {
31             id: columnSpinner
32             label: "Column"
33             onValueChanged: {
34                 resultText.text = "Loading...";
35                 myWorker.sendMessage( { row: rowSpinner.value, column: columnSpinner.value } );
36             }
37         }
38     }

 1 var cache = new Array(64);
 2 for (var i = 0; i < 64; i++)
 3     cache[i] = new Array(64);
 4 
 5 function triangle(row, column) {
 6     if (cache[row][column])
 7         return cache[row][column]
 8     if (column < 0 || column > row)
 9         return -1;
10     if (column == 0 || column == row)
11         return 1;
12     return triangle(row-1, column-1) + triangle(row-1, column);
13 }
14 //! [0]  
15 WorkerScript.onMessage = function(message) {
16     //Calculate result (may take a while, using a naive algorithm)
17     var calculatedResult = triangle(message.row, message.column);
18     //Send result back to main thread
19     WorkerScript.sendMessage( { row: message.row,
20                                 column: message.column,
21                                 result: calculatedResult} );
22 }
23 //! [0]