javascript - 刷新后 socket.io 客户端多次监听同一事件

Question

我得到了一个母版页，其中包含一个项目表，在 socket.io 与服务器成功连接后，表数据将不断刷新。

单击表中的项目(项目的 ID 将传递到服务器)后，将使用 ajax 加载 subview ，并通过监听来自服务器的事件不断刷新。

现在的问题是，通过选择表中的另一个项目， subview 正在监听多次(即使我在成功的 ajax 操作后清除了 subview (HTML))。例如，如果您选择 10 个项目，它会听 10 次并且看不到 subview 中发生了什么(一切都在快速闪烁)。

应用程序.js (nodejs)

io.on('connection', function (socket) {
    console.log('Client Connected...' + clients[socket.id]);
    // updates master page table.
    socket.emit('data', self.StatusObject(self.allModules));

    socket.on('close', function (err, res) {
        console.log('Client disconnected...' + err + ' ' + res);
    });

    //updates child view.
    socket.on('childData', function (id) {
        var data = self.FindModule(id);
        statusPacketTimer = setInterval(function () {
            socket.emit('publishChildData', self.StatusPacket(id));
        }, 1000);
    });
});

masterpage.html (html & jquery)

<table>
    <tr onclick="getContent(${id})">
        <td>row_id</td>
        <td>status</td>
    </tr>
</table>

<script>
socket.on('data', function (message) {
    $('#mainTable').find('tr:gt(0)').remove();
    updateTable(message);
});

function getContent(id) {
if (id){
        $.ajax({
            async: true,
            type: 'get',
            cache: false,
            url: 'getContext',
            data: { 'id': id },
            success: function (data, status, moduleData) {
                if (status == 'success') {
                    $('#content').html('').html(data);
                }
            }
        });
    }
}
</script>

childpage.html(html & jquery)

<div id="content"></div>
<script>
    socket.emit('childData', $('#id').val());
    socket.on('publishChildData', function (data) {
        // replace the data in div with new data
    })
</script>

Answer 1

//updates child view.
socket.on('childData', function (id) {
    var data = self.FindModule(id);
    statusPacketTimer = setInterval(function () {
        socket.emit('moduleData', self.LocateStatusPacket(id));
    }, 1000);
});

在这段代码中，setInterval 是连续的。如果通过 socket.emit('moduleData', self.LocateStatusPacket(id));

触发 subview 渲染

然后每秒渲染一次