时间戳

首页 > 解决方案 > 将 JavaScript 闭包添加到图表数据刷新器

javascript - 将 JavaScript 闭包添加到图表数据刷新器

问题描述

这是一个获取图表数据并每 30 秒重复一次操作的脚本。问题是存在内存泄漏，一些研究告诉我我需要添加一个 JavaScript 闭包。但是，由于我对 JavaScript 不是很熟悉，所以我无法让它工作。

这是我最后一次尝试的结果：

fetch('log_chart.txt')
    .then(function (response) {
        return response.text();
    })
    .then(function (text) {
        let series = csvToSeries(text);
        renderChart(series);
    setTimeout(trigger, 30000);
    })
    .catch(function (error) {
        console.log(error);
    });

  function trigger() {
    setTimeout(function (){
      fetch('log_chart.txt')
      .then(function (response) {
      return response.text();
      })
      .then(function (text) {
      let series = csvToSeries(text);
      renderChart(series);
      })
        .catch(function (error) {
      console.log(error);
    }, 30000);
    });
  }

第一部分获取数据并呈现图表，并将其设置为在 30 秒后重复。第二部分应重复上述内容，并且永远不要停止。

问题是它在第二次更新后确实停止了——所以第二次setTimeout没有像我预期的那样工作。

我应该怎么做呢？

标签： javascriptclosures

解决方案

在这种情况下，您应该改用setInterval它，它每 x 秒运行一个特定的函数。它还应该解决您的内存泄漏问题，这可能是由于使用, 因为它是异步的，这意味着代码在继续运行其他代码的同时setTimeout继续添加越来越多的内容。setTimeout这会占用不必要的内存。更多相关信息：setTimeout() 如何在此代码中创建内存泄漏？

至于解决方案：

function trigger() {
    fetch("log_chart.txt")
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            let series = csvToSeries(text);
            renderChart(series);
        })
        .catch(function (error) {
            console.log(error);
        });
}

trigger()
setInterval(trigger, 30000)

推荐阅读