QML中onPropertyChanged调用函数执行顺序异常原因及同步方案

原因分析 #

这个现象的核心是QML事件循环的执行特性：

1. 初始化阶段，datapool.data1和datapool.data2的初始值1会同时触发property1和property2的changed信号，这两个信号的回调被依次加入事件队列。
2. QML的JavaScript代码单线程执行，但调用ListModel.append()这类涉及UI绑定更新的方法时，会触发内部通知信号并插入事件队列。JavaScript引擎执行到这类操作后，会主动让出控制权，优先处理队列中的其他任务（也就是property2触发的updateList），等该任务完成后，才会回到之前未执行完的updateList继续执行剩余代码。
3. 这就造成了日志中显示的“property1的updateList先启动，中途被property2的updateList抢占，最后才完成”的情况。

同步执行的解决方案 #

方案1：合并触发逻辑，避免重复调用 #

既然property1和property2的变化最终都是更新同一个listModel，可以合并两个changed回调，用延迟调用确保短时间内的多次触发只会执行一次updateList：

// 替换原来的onProperty1Changed和onProperty2Changed
onProperty1Changed: scheduleUpdate()
onProperty2Changed: scheduleUpdate()

var updateTimer = null
function scheduleUpdate() {
    // 如果已有延迟任务，先取消
    if (updateTimer) clearTimeout(updateTimer)
    // 延迟1ms执行，确保所有属性变化都完成后再更新
    updateTimer = setTimeout(function() {
        updateList("merged")
        updateTimer = null
    }, 1)
}

这种方式从根源避免了函数被打断的问题，无论两个属性信号触发顺序如何，最终只会执行一次更新。

方案2：使用执行锁，确保函数完整执行 #

通过标记变量控制updateList的执行状态，避免同时执行多个实例：

var isUpdating = false

function updateList(name)
{
    if (isUpdating) {
        console.log("updateList skipped", name)
        return
    }
    isUpdating = true
    
    console.log("updateList start", name)
    listModel.clear();

    if (property1 == 1) {
        console.log("updateList title 1", name)
        listModel.append(title1);
    }
    if (property2 == 1) {
        console.log("updateList title 2", name)
        listModel.append(title2);
    }
    console.log("updateList end", name)
    
    isUpdating = false
}

该方案会直接跳过同时触发的第二个调用，确保每次只有一个updateList完整执行。如果需要队列等待，可以将待执行请求存入数组，在当前执行完成后处理队列，但大多数场景下跳过重复调用已足够。

方案3：直接绑定Model内容（更符合QML风格） #

QML推荐用绑定而非手动调用函数更新UI，你可以直接将listModel的内容与property1、property2绑定：

ListModel {
    id: listModel
    Component.onCompleted: updateModel()
    
    function updateModel() {
        clear()
        if (property1 == 1) append(title1)
        if (property2 == 1) append(title2)
    }
}

// 监听属性变化触发Model更新
onProperty1Changed: listModel.updateModel()
onProperty2Changed: listModel.updateModel()

这种方式结合方案1的延迟调用效果更佳，本质是确保Model更新的原子性。

内容的提问来源于stack exchange，提问作者chandan