如何在不刷新页面的情况下刷新 Javascript 变量？答案

【问题标题】：How to refresh Javascript variable without page refresh?如何在不刷新页面的情况下刷新 Javascript 变量？
【发布时间】：2018-09-27 03:29:49
【问题描述】：

我有一个 Three.JS 应用程序，它根据文本文件为对象着色：

let color1 = 0x00ff00;
let color2 = 0xFF04F0;

在 Three.JS 代码中：

var cubeGeometry = new THREE.BoxGeometry(15, 1, 5);
var cubeMaterial = new THREE.MeshLambertMaterial({color:color2});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

var cubeGeometry1 = new THREE.BoxGeometry(15, 1, 5);
var cubeMaterial1 = new THREE.MeshLambertMaterial({color:color1});
var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);

随着文本文件中颜色的变化，Three.JS 应用程序会正确显示它们。如果我在 html 的 <head> 上添加 <META HTTP-EQUIV="refresh" CONTENT="5">，那么它会刷新并获取颜色值，但场景会重置（请注意，您可以使用鼠标移动场景）。有没有办法在不重新加载页面并保留 Three.JS 场景的情况下更新 Javascript 变量？

完整代码在这里：https://github.com/f0n/threeSocket

GitHub 页面：https://f0n.github.io/threeSocket/

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

当您将<META HTTP-EQUIV="refresh" CONTENT="5"> 添加到您的HTML 文档时，您是在告诉它刷新所有内容。 HTML、DOM 更新、JavaScript、它的状态、变量值……一切。如果您想在场景中保持位置，则不应使用此方法。

您为什么不加载 HTML 页面一次，然后对服务器执行定时调用以仅检索颜色数据而不进行整页刷新？这就是XMLHTTPRequest 的用途。这就是他们所说的 AJAX（Asynchronous Javascript And XML），有plenty of StackOverflow questions 概述了如何使用它。

【讨论】：

谢谢，我了解我实施的刷新的含义。如何在离线配置（非服务器位置）中实现它？
您的意思是您不想在网络上运行它，而只想在您的计算机上运行它？
正确。它是一个本地应用程序，最终用户不了解运行服务器。
您在浏览器中运行它吗？
嗯...如果您不想运行服务器，那么从不同的文件中获取数据将是一个问题。默认情况下，浏览器会阻止您从本地硬盘驱动器获取数据，因为这是一个安全问题。如果网站可以执行'load("C:/user/documents/")，您能想象安全问题吗？话虽如此，你知道未来所有的颜色会是什么吗？您可以简单地在初始加载时声明一个包含所有颜色的数组，然后每 5 秒跳到下一个颜色，以避免从单独的文件中不断获取数据。

【解决方案2】：

您可以尝试使用 setInterval 方法刷新值，这样就不需要刷新整页。

【讨论】：