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

---

一、前言

在这篇文章中，我们将深入探讨一个网页启动时执行的 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. 代码功能概述

1. 页面加载后执行的代码 (window.onload):

   • 代码在页面加载完成后执行，输出“页面启动”到控制台。

2. 变量初始化:

   • cycle: 设置初始的心跳发送间隔为 5 分钟。
   • data: 使用 FormData 对象存储需要发送的数据。

3. getHeartbeatInterval 函数:

   • 向服务器发送一个请求来获取心跳发送间隔的最新值。
   • 如果服务器返回的新间隔值不同于当前值，更新间隔时间并重新设置定时器。

4. sendHeartbeatData 函数:

   • 向服务器发送心跳数据。

5. 定时器设置:

   • intervalId: 定时器的 ID，用于定期发送心跳数据。
   • 每 cycle 分钟发送一次心跳数据。
   • 每 30 秒（0.5 分钟）检查心跳间隔是否需要更新。

3. 优化建议

1. 优化定时器设置:

   • 每 30 秒检查间隔可能会对服务器造成过多的请求。考虑增加检查间隔，如每 1 分钟或更长时间。

2. 减少重复代码:

   • 可以将 fetch 请求封装成一个函数来减少重复代码，提升代码的可维护性。

3. 错误处理改进:

   • 可以添加更详细的错误处理和重试机制，以提高程序的鲁棒性。

4. 增强代码可读性:

   • 使用更具描述性的变量名和函数名，使代码更易于理解。

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); // 增加检查间隔
};

5. 总结

本篇文章详细解析了网页加载时执行的周期性心跳发送代码，提出了代码优化的建议。通过调整检查间隔、减少重复代码和增强错误处理，可以使代码更加高效和易于维护。希望这些改进建议对你有所帮助！