面试题：Svelte中onDestroy在复杂业务场景下的应用

使用onDestroy实现关闭WebSocket连接
- 首先，在Svelte组件中引入onDestroy函数，它来自于svelte库。
- 示例代码如下：
```
<script>
import { onDestroy } from'svelte';

let socket;

// 建立WebSocket连接
socket = new WebSocket('ws://your - server - url');

socket.onmessage = (event) => {
    // 处理接收到的数据
    console.log('Received data:', event.data);
};

onDestroy(() => {
    if (socket && socket.readyState!== WebSocket.CLOSED) {
        socket.close();
    }
});
</script>

<p>WebSocket connection component</p>
```
- 在上述代码中，我们创建了一个WebSocket实例socket。onDestroy函数接受一个回调函数作为参数。当组件销毁时，会执行这个回调函数。在回调函数中，我们检查socket是否存在并且其readyState不是CLOSED（WebSocket已关闭的状态），如果满足条件，则调用socket.close()方法关闭WebSocket连接。
可能遇到的问题及解决方案
- WebSocket连接未成功建立：
  - 问题描述：在尝试关闭WebSocket连接时，socket可能为undefined，因为连接可能由于网络问题等原因未能成功建立。
  - 解决方案：在onDestroy的回调函数中添加对socket是否存在的检查，如上述代码所示。这样可以避免在socket为undefined时调用close方法导致的错误。
- 多次调用onDestroy回调：
  - 问题描述：在某些复杂的组件生命周期场景下，onDestroy回调可能会被多次调用，这可能导致close方法被多次调用，从而引发错误。
  - 解决方案：在onDestroy回调函数中添加逻辑，确保close方法只在WebSocket尚未关闭时调用一次。例如，可以在关闭连接后将socket设置为null，如下：
```
<script>
import { onDestroy } from'svelte';

let socket;

socket = new WebSocket('ws://your - server - url');

socket.onmessage = (event) => {
    console.log('Received data:', event.data);
};

onDestroy(() => {
    if (socket && socket.readyState!== WebSocket.CLOSED) {
        socket.close();
        socket = null;
    }
});
</script>

<p>WebSocket connection component</p>
```
- 连接关闭时的事件处理：
  - 问题描述：在关闭连接后，可能需要进行一些额外的清理工作，例如清除相关的定时器、取消未完成的异步操作等。并且，如果在关闭连接时没有正确处理close事件，可能会遗漏一些重要的清理逻辑。
  - 解决方案：为WebSocket的close事件添加监听器，在监听器中执行清理操作。例如：
```
<script>
import { onDestroy } from'svelte';

let socket;

socket = new WebSocket('ws://your - server - url');

socket.onmessage = (event) => {
    console.log('Received data:', event.data);
};

socket.onclose = () => {
    // 执行清理操作，如清除定时器等
    console.log('WebSocket connection closed. Performing cleanup.');
};

onDestroy(() => {
    if (socket && socket.readyState!== WebSocket.CLOSED) {
        socket.close();
    }
});
</script>

<p>WebSocket connection component</p>
```

星途面试题库

面试题：Svelte中onDestroy在复杂业务场景下的应用

知识考点

面试题答案