VUE实践优化：轮询机制与代码结构升级

前言

        我们之前探讨过，对于包含处理状态的表格数据，我们可以通过轮询的方式进行处理（轮询更新进度条：JavaScript中的定时器和异步编程技巧）。然而，当我们离开页面时，定时器仍会继续触发请求，这会造成资源的浪费，因为返回的数据并没有被渲染出来。

        为了解决这个问题，我们需要实现以下要求：

1. 最多只能同时存在一个轮询的定时器。
2. 当用户离开页面时，定时器应被关闭。
3. 当用户重新进入页面时，如果仍有数据正在处理中，应重新启动轮询。
4. 轮询应能跨页面、跨显示数量。

---

实现

为了实现上述要求，我们可以采取以下步骤：

1. 在全局范围内定义一个唯一的定时器变量，例如 running_task_timer。
2. 在开始轮询之前，检查 running_task_timer是否已存在。如果存在，则清除该定时器并停止轮询。
3. 如果需要启动轮询，首先检查页面是否处于激活状态。如果不在激活状态，则不启动轮询。
4. 启动轮询时，设置 running_task_timer 为定时器的ID，并开始轮询处理。
5. 当用户离开页面时，清除 running_task_timer 并停止轮询。
6. 当用户重新进入页面时，检查是否有正在处理的数据。如果有，则重新设置running_task_timer 并启动轮询。
7. 在轮询处理中，检查页面是否处于激活状态。如果不在激活状态，则暂停轮询处理。
8. 在轮询处理完成时，检查是否有新的数据需要处理。如果有，则重新设置running_task_timer 并启动轮询。
9. 通过上述步骤，我们可以确保同时只有一个轮询的定时器存在，并在用户离开页面时关闭定时器。当用户重新进入页面时，如果仍有数据正在处理中，可以重新启动轮询。同时，轮询的处理可以跨页面、跨显示数量进行。

数据定义

• tableData: 这是一个数组，用于存储从服务器获取的表格数据。
• running_task_timer: 这是一个定时器变量，用于轮询正在运行的任务。
• running_task_list: 这是一个数组，用于存储状态为“RUNNING”的任务。

生命周期钩子

• created(): 当组件被创建时，它调用 getData() 方法来获取数据。
• beforeDestroy(): 当组件即将被销毁时，它调用 clearMyInterval() 方法来清除定时器，以避免资源浪费。

方法

• getData(): 使用 axios 发送 GET 请求来获取数据。如果响应的状态码是 200，它将更新 tableData 并调用 addRunningTask() 方法。
• addRunningTask(): 遍历 tableData，找出状态为“RUNNING”的任务，并将它们存储在 running_task_list 中。如果 running_task_list 有内容，则调用 startInterval() 方法来启动定时器；否则，调用 clearMyInterval() 方法清除定时器。
• startInterval(): 首先调用 clearMyInterval() 来清除可能已经存在的定时器，然后设置一个新的定时器，每隔1秒调用 getData() 方法来轮询数据。
• clearMyInterval(): 如果 running_task_timer 不为 null，则清除该定时器。
• reloadTask(row): 更新特定行的状态为“BEGIN”，并使用 axios 发送 PUT 请求来重新加载任务。如果响应的状态码是 200，则再次调用 getData() 方法。如果请求失败，它会将行的状态设置为“DONE”。

---

改进

提升性能：只更新修改项数据 

        更新机制的改进：之前的代码可能存在一个性能问题，即定时器会不断轮询服务器，无论运行的条数多少，都会全量更新接口返回的数据，这可能导致不必要的性能浪费。在新的代码中，我们通过在 updateTask 方法中只更新 running_task_list 中存储的需要更新的项，来避免了这一问题。任务完成后，从 running_task_list 中移除，从而在当前页更新完毕后停止轮询。

---