当前位置：首页 > news >正文

理解并优化页面启动时的周期性数据发送代码

news 来源：原创 2024/9/21 11:02:27

理解并优化页面启动时的周期性数据发送代码

一、前言
- 1. 代码解析
- 2. 代码功能概述
- 3. 优化建议
- 4. 优化后的代码示例
- 5. 总结

一、前言

在这篇文章中，我们将深入探讨一个网页启动时执行的 JavaScript 代码片段。这个代码片段涉及到周期性地向服务器发送心跳数据，并根据服务器的响应调整发送间隔。我们将详细分析每个部分的功能，并探讨如何优化这段代码。

1. 代码解析

window.onload = function () {console.log("页面启动");var cycle = 5; //分钟const data = new FormData();data.append('ip', '127.0.0.1');data.append('uuid', 'cccc');var intervalId;function getHeartbeatInterval() {fetch('http://127.0.0.1:8888/equipmentInfo/getHeartbeatInterval', {method: 'POST',body: data,}).then(response => response.json()).then(result => {if (result.data != null) {if (cycle !== result.data) {clearInterval(intervalId);cycle = result.data;intervalId = setInterval(sendHeartbeatData, cycle * 60 * 1000);}}}).catch(error => console.error('Error:', error));}function sendHeartbeatData() {fetch('http://127.0.0.1:8888/equipmentInfo/sendHeartbeatData', {method: 'POST',body: data,}).then(response => response.json()).catch(error => console.error('Error:', error));}intervalId = setInterval(sendHeartbeatData, cycle * 60 * 1000);setInterval(getHeartbeatInterval, 0.5 * 60 * 1000);
};

2. 代码功能概述

页面加载后执行的代码 (window.onload):
- 代码在页面加载完成后执行，输出“页面启动”到控制台。
变量初始化:
- cycle: 设置初始的心跳发送间隔为 5 分钟。
- data: 使用 FormData 对象存储需要发送的数据。
getHeartbeatInterval 函数:
- 向服务器发送一个请求来获取心跳发送间隔的最新值。
- 如果服务器返回的新间隔值不同于当前值，更新间隔时间并重新设置定时器。
sendHeartbeatData 函数:
- 向服务器发送心跳数据。
定时器设置:
- intervalId: 定时器的 ID，用于定期发送心跳数据。
- 每 cycle 分钟发送一次心跳数据。
- 每 30 秒（0.5 分钟）检查心跳间隔是否需要更新。

3. 优化建议

优化定时器设置:
- 每 30 秒检查间隔可能会对服务器造成过多的请求。考虑增加检查间隔，如每 1 分钟或更长时间。
减少重复代码:
- 可以将 fetch 请求封装成一个函数来减少重复代码，提升代码的可维护性。
错误处理改进:
- 可以添加更详细的错误处理和重试机制，以提高程序的鲁棒性。
增强代码可读性:
- 使用更具描述性的变量名和函数名，使代码更易于理解。

4. 优化后的代码示例

window.onload = function () {console.log("页面启动");var cycle = 5; //分钟const data = new FormData();data.append('ip', '127.0.0.1');data.append('uuid', 'cccc');var intervalId;function fetchFromServer(url, method, data) {return fetch(url, {method: method,body: data,}).then(response => response.json()).catch(error => console.error('Error:', error));}function getHeartbeatInterval() {fetchFromServer('http://127.0.0.1:8888/equipmentInfo/getHeartbeatInterval', 'POST', data).then(result => {if (result.data != null) {if (cycle !== result.data) {clearInterval(intervalId);cycle = result.data;intervalId = setInterval(sendHeartbeatData, cycle * 60 * 1000);}}});}function sendHeartbeatData() {fetchFromServer('http://127.0.0.1:8888/equipmentInfo/sendHeartbeatData', 'POST', data);}intervalId = setInterval(sendHeartbeatData, cycle * 60 * 1000);setInterval(getHeartbeatInterval, 1 * 60 * 1000); // 增加检查间隔
};