js有序列表轮巡,已知正在显示的列表，计算出未显示的列表的，下一组待显示列表在未显示列表开头

在JavaScript中，如果你有一个有序列表，比如一组需要轮巡展示的数据，你可以采取以下步骤来管理显示和隐藏的过程：

1. 定义数据结构：首先，创建一个表示设备的数据结构，可能是一个数组，每个元素包含设备信息和标识其是否已显示的标志。

class DisplayItem {
    constructor(deviceId, isDisplayed) {
        this.deviceId = deviceId;
        this.isDisplayed = isDisplayed;
    }
}

2. 初始化列表：初始化已显示和未显示的列表。

let displayedItems = []; // 已显示的设备列表
let hiddenItems = []; // 未显示的设备列表

// 将已知设备添加到hiddenItems，因为它们尚未开始轮巡
for (let i = 0; i < knownDevices.length; i++) {
    hiddenItems.push(new DisplayItem(i + 1, false));
}

3. 轮巡逻辑：你可以设计一个函数来轮巡显示设备。假设我们按顺序轮播，并且当所有设备都显示过后回到第一个设备。

function displayNextItem() {
    if (displayedItems.length === 0) { // 如果所有设备都已显示完
        displayedItems[0] = hiddenItems.shift(); // 将第一个设备从隐藏列表移到显示列表
        displayedItems.push(hiddenItems[0]); // 保存当前显示设备的位置，让下一个设备接替它
    } else {
        displayedItems.shift(); // 移除已显示的最后一项
        displayedItems.push(hiddenItems.shift()); // 显示下一个设备
    }

    // 更新显示状态和DOM
    // ...
}

// 开始轮巡
setInterval(displayNextItem, DISPLAY_INTERVAL);

4. 状态同步：当你从WebSocket或其他渠道接收新设备或更改时，需要相应地调整这两个列表。例如：

function handleNewDevices(newDevices) {
    for (let device of newDevices) {
        let newItem = new DisplayItem(device.id, false); // 创建新的DisplayItem
        if (!hiddenItems.some(item => item.deviceId === device.id)) { // 新设备加入隐藏列表
            hiddenItems.push(newItem);
        } else {
            console.log('设备 ID ' + device.id + ' 已存在');
        }
    }
}

// 在接收到WebSocket消息时调用
handleNewDevices(receivedDevices);