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作为第一个参数，您正在传递字符串'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; // 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>

如何使用JS

1 个答案: