Javascript 如何设置和更新全局变量'；来自HTML5服务器发送事件的s值

我想设置、更新使用HTML5服务器发送事件的全局变量的值

这是我的服务器代码

$chart = [
    ['name' => 'User A', 'data' => range(1, 3)],
    ['name' => 'User B', 'data' => range(1, 3)],
    ['name' => 'User C', 'data' => range(1, 3)]
];

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$stream  = 'event: chart' . "\n";
$stream .= 'data: ' . json_encode($chart) . "\n\n";

print $stream;
flush();

这是我的客户代码

var source, chart_data;
if (!!window.EventSource) {
    source = new EventSource('/stream/chart-data');
    source.addEventListener('chart', function(event) {
        // It's work.
        console.log(event.data);

        // It's not work.
        chart_data = event.data;
    }, false);
}

// It's not work.
console.log(chart_data);

我尝试将新值设置为

chart\u data

，但它总是

未定义。
如何将新值设置为全局变量？
这是因为您的代码是异步的。在事件侦听器外部调用
console.log（图表数据）
时，尚未为其指定值

在事件侦听器中记录图表_数据的值时，您将看到该值已设置。您还可以尝试在JavaScript控制台中记录
chart\u data
，如果您一直等到异步调用被调用之后才看到设置的值

更清楚地说,，您可以向
控制台.log
添加时间戳，您将看到在事件侦听器内部调用的
控制台.log
的值小于事件侦听器中的值，因为它是在稍后调用的。
您可以使用箭头函数访问图表事件中的全局变量：

var source, chart_data;
if (!!window.EventSource) {
  source = new EventSource('/stream/chart-data');
  source.addEventListener('chart', (event) => {
    console.log(event.data);

    this.chart_data = event.data; //access using this variable
   }, false);
}

谢谢Brian de Heus。你们能给我一些建议给全局变量增加新的值吗？