时间戳

首页 > 解决方案 > 运行重复的 javascript 获取请求会很快填满浏览器内存。有没有办法防止这种情况？

javascript - 运行重复的 javascript 获取请求会很快填满浏览器内存。有没有办法防止这种情况？

问题描述

我正在构建一个网页，该网页显示包含图像的实时事件流。为此，我决定尝试使用运行客户端的 javascript 和下面的代码每 1 秒从我的 API 端点获取数据（然后相应地更新 html）。我注意到每个获取请求的结果都保存在内存中，这将很快填满浏览器的内存，特别是如果按计划运行几个小时或一整天。

我搜索了互联网，发现我可以将创建的对象设置为 null 以将它们标记为安全以清除垃圾收集器，但我是 javascript 新手，我不确定实际设置为 null 的位置/内容. 你知道我应该在下面的代码中将什么设置为 null 吗？

如果有任何其他解决方案，将不胜感激。

代码：编辑：删除 setTimeout(1) - 仍然得到上述相同的行为

let myHeaders = new Headers();
myHeaders.append("xxxx", "xxxxxx");
myHeaders.append("Content-Type", "text/plain");

let raw = "{x:x}";

let requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

function printResult(result){
    console.log(result);
}

function getLatestRecords(){
    fetch("https://xxxx.xxxx.com", requestOptions)
      .then(response => response.json())
      .then(result => printResult(result))
      .catch(error => console.log('error', error));

    //setTimeout(1)
}

let interval = setInterval(
    function() {
        getLatestRecords()
    },
    1000
);

看起来正在为每次提取创建数据对象：

获取创建的对象

标签： javascriptfetch-api

解决方案

目前尚不清楚这是否与您的内存泄漏有关，但您正在setTimeout以一种奇怪的方式使用。setTimeout用于调度在一定毫秒数后调用的回调；setTimeout(1)是未定义的行为。

由于您的意图是让您的 fetch 请求在 1 秒后被取消，因此您需要这样做：

function getLatestRecords(){
    var controller = new AbortController();
    setTimeout(() => controller.abort(), 1000);
    return fetch("https://xxxx.xxxx.com", { ...requestOptions, signal: controller.signal })
        .then(response => response.json())
        .then(result => printResult(result))
        .catch(error => console.log('error', error));
}

推荐阅读