添加语音与notify逻辑后，AJAX实时叫号列表显示异常但语音正常

问题根源 #

1. DOM元素被误移除：原前端逻辑中，每次AJAX获取数据后会移除对应收银员的原有DOM项，再插入克隆的新项。但后端仅返回有正在服务队列的收银员记录，无队列的收银员不会出现在响应中，导致这些收银员的DOM项被移除后无法恢复，最终列表丢失部分或全部项。
2. 列表更新逻辑错误：仅处理后端返回的收银员项，未保留页面初始加载的所有收银员DOM结构，导致无队列的收银员无法在列表中显示（即使是隐藏状态）。

修复方案 #

前端核心逻辑调整 #

取消“移除原项-克隆插入”的操作，改为直接更新原有DOM项内容，并统一控制显示/隐藏：

• 每次AJAX请求后，先将所有收银员项默认隐藏
• 遍历后端返回的队列数据，找到对应收银员的DOM项，更新顾客姓名并显示该项
• 保留页面初始的所有收银员DOM结构，确保无队列的收银员项始终存在（仅隐藏）

修改后的前端new_queue函数代码 #

function new_queue() {
    $.ajax({
        url: './../../Actions.php?a=cashier_get_queue_backup',
        method: 'GET',
        dataType: 'json',
        error: err => console.log(err),
        success: function(resp) {
            if (resp.status == 'success') {
                // 先隐藏所有收银员项
                $('#serving-list .list-group-item').hide();
                
                $.each(resp.data, function(i, row) {
                    var item = $('#serving-list').find('.list-group-item[data-id="' + row.cashier_id + '"]');
                    // 更新顾客姓名（包含优先级标识）
                    if (row.priority == 1) {
                        item.find('.serve-queue').text(row.customer_name + " 🧓♿🤰");
                    } else {
                        item.find('.serve-queue').text(row.customer_name);
                    }
                    // 显示当前有队列的收银员项
                    item.show('slow');
                    
                    // 语音播报逻辑（保留原有功能）
                    if (row.notify == 1) {
                        speak("Calling the attention of " + row.customer_name + ", Please proceed to " + row.name);
                    }
                });
            }
        }
    });
}

后端代码优化（非必需但建议） #

后端cashier_get_queue_backup函数中，extract($_POST)是多余的（前端用GET请求，无POST数据），可删除；同时将全局更新notify=0改为仅更新已播报的队列记录，避免影响其他功能：

function cashier_get_queue_backup()
{ // for cashier monitoring backup
    $qry = $this->query("SELECT cql.*, cl.name FROM cashier_queue_list cql LEFT JOIN cashier_list cl ON cql.cashier_id = cl.cashier_id WHERE cql.status = 1 ORDER BY cql.queue_id ASC");
    $resp['status'] = 'success';
    $resp['data'] = array();
    $notify_ids = array();
    while ($row = $qry->fetchArray(SQLITE3_ASSOC)) {
        $row['customer_name'] = openssl_decrypt($row['customer_name'], "DES-ECB", "902e2ijio2jklqd");
        array_push($resp['data'], $row);
        // 记录需要重置notify的队列ID
        if ($row['notify'] == 1) {
            $notify_ids[] = $row['queue_id'];
        }
    }
    if (empty($resp['data'])) {
        $resp['data'] = array();
    }
    // 仅重置已播报的队列notify状态
    if (!empty($notify_ids)) {
        $ids_str = implode(',', $notify_ids);
        $qry2 = $this->query("UPDATE cashier_queue_list SET notify = 0 WHERE queue_id IN ($ids_str)");
    }
    return json_encode($resp);
}

额外说明 #

• 原逻辑中反复克隆/移除DOM元素会导致不必要的性能损耗，修改后直接操作原有DOM项更高效
• 后端全局更新notify=0可能影响其他依赖该字段的功能，改为精准更新更安全

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