javascript - 如何从 HTML5 服务器发送事件设置和更新全局变量的值

Question

我想设置、更新使用 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_data 设置新值，但它始终未定义。如何为全局变量设置新值？

Answer 1

这是因为您的代码是异步的。当在事件监听器外部调用 console.log(chart_data) 时，尚未为其赋予值。

当您在事件监听器中记录图表数据的值时，您将看到该值已被设置。您还可以尝试在 JavaScript 控制台中记录 chart_data，并在调用异步调用之后查看正在设置的值。

为了使这一点更清楚，您可以向 console.log 添加时间戳，您将看到在事件监听器内部调用的 console.log 有比事件监听器中的值更小的值，因为它是在稍后调用的。