Javascript 如何使用JS在div标记中动态显示值

我正在做一个小项目，通过ping网站显示互联网速度，并显示网络速度。但问题是我每次都必须重新加载才能获得速度。如何使包含速度值的div标签动态变化

我试图将标记的值加载到它本身，但它对我不起作用

HTML：

<h2> <span id="speed"></span> kbps</h2>

---

必须动态地重新加载标记。首先，您有两个语法问题

JQuery方法将URL作为第一个参数，您正在传递字符串“kbitsPerSecond”，它不是URL：

$('#speed').load('kbitsPerSecond');

您对

.fadeIn（）

的调用缺少结束引号，如果您希望在

.load

完成后淡入，则不应在

.load

后将其链接，而应将其包含在

.load（）

回调中：

$('#speed').fadeOut('slow').load('https://example.com').fadeIn('slow);

现在，

setTimeout（）

是一个一次性计时器。不要使

refresh（）

递归，而是使用

setInterval（）

这是一个连续计时器——它计数到提供的间隔，然后启动回调函数，然后再次计数并再次启动，依此类推。但是，即使在页面完成加载后，这仍将继续，因此您可能希望在某个时候取消计时器

此外，您不需要两个单独的

.load（）

调用和一个单独的函数，如下所示：

let timer=null；//将保留对计时器的引用
$（函数（）{
计时器=设置间隔（函数（）{
$（“#速度”）。淡出（'slow'）。加载（'https://example.com，函数（）{
$（'speed'）.fadeIn（'slow'）；
});
},200);  
});
//取消注释并将以下内容添加到某个回调中，该回调在您不再希望计时器运行时触发
//清除间隔（计时器）

测试kbps
除了
fadeIn（'slow）
部分后缺少的引号之外，您拥有的看起来还可以。当你修正那个报价时，它在做什么？（这里setInterval可能比setTimeout好，但由于您在超时回调中再次调用了
refresh（）
，它应该仍然可以工作。）将refresh（）从setTimeout函数中取出，但保留在refresh函数中。你需要修正打字错误“慢”也就是“慢”不是“慢”slow@EvikGhazarian如果
refresh（）
来自
setTimeout（）
函数，并进入
refresh（）
的主体，则可能会导致
调用堆栈超出
错误。
refresh（）
调用应该在timer函数中，因此它以固定的间隔运行。是的间隔解决方案比我的带计数器的递归解决方案更好。我在考虑做递归，但是使用计数器。@EvikGhazarian它不仅仅是关于递归。请看我在你回答下面的评论。您的代码将无法按您认为的方式工作。我试图复制您的代码，但仍然无法工作。@GokulaKrishnan请详细说明。“不起作用”是什么意思？控制台中是否显示任何错误？网络标签呢？@ScottMarcus这是一个比我更好的答案。这是我的密码笔。我希望动态更新网络速度，而不是mannually@GokulaKrishnan
kbitsPerSecond
是一个变量，而不是字符串，因此在引用它时，正如我在回答中提到的，它不应该在引号中。此外，它不是一个URL，因此首先不应该使用
.load（）
，因为您实际上没有对单独的网络位置执行AJAX请求。您只需要每隔一段时间运行一个函数。
$('#speed').fadeOut('slow').load('https://example.com').fadeIn('slow);