javascript - 如何使用JS在div标签中动态显示值

Question

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

我尝试将标签的值加载到自身，但它对我不起作用。

HTML:

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

JS:

kbitsPerSecond 具有速度的值。

$(document).ready( function () {
  $('#speed').load('kbitsPerSecond');
refresh();
});

function refresh() {
  setTimeout ( function() {
    $('#speed').fadeOut('slow').load('kbitsPerSecond').fadeIn('slow);
    refresh();
  },200);
  }

标签必须动态加载

Answer 1

首先，你有两个语法问题。

JQuery .load()方法将 URL 作为第一个参数，您传递的不是 URL 的字符串 'kbitsPerSecond':

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

您对 .fadeIn() 的调用缺少结束引号，如果您希望淡入发生在 .load 完成后，您不应该链接它在 .load 之后，而是包含在 .load() 回调中:

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

现在，setTimeout() 是一个一次性定时器。不是使 refresh() 递归，而是使用 setInterval() 这是一个连续的计时器——它计算到它提供的时间间隔，然后触发它的回调函数，然后它再次计数并再次开火等等。但是，即使在页面加载完成后这仍会继续，因此您可能希望在某个时候取消计时器。

此外，您不需要两个单独的 .load() 调用和一个单独的函数，如下所示:

let timer = null; // Will hold a reference to the timer
$(function () {
  timer = setInterval (function() {
    $('#speed').fadeOut('slow').load('https://example.com', function(){
      $('#speed').fadeIn('slow');
    });
  },200);  
});

// Uncomment and add the following to some callback that fires when you no longer want the timer to run
//clearInterval(timer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2> <span id="speed">TEST</span> kbps</h2>