javascript - 使用 Javascript 或 Jquery 操作 API 提要

Question

我是一个初学者，所以如果这个问题很初级，我很抱歉。

我有一个数据 api，它以这种格式返回一个 JSON 对象：

{"Variable": "Number", "Variable2": "Number2"}; //(yes the number is returned as a string)

我想创建一个页面，其中对象（“Number”和“Number2”）的值不断更新，因为值不断变化，但整个页面不需要刷新。

http://sendgrid.com有一个我想做的很好的例子。

任何帮助都会很棒！

Answer 1

处理不断变化的数据的方法是使用 setTimeout。还有另一种方法称为 setInterval，但最好将 setTimeout 与递归函数一起使用。这样，如果操作花费的时间比预期的要长，计时器就不会不同步。通过示例演示：

function updateCounter() {
 var timer; 

 document.getElementById("counter").innerText(data.Variable);

 timer = setTimeout(updateCounter, 50);

}

Answer 2

您可以使用您的数据向您的 api 发送请求setInterval()并更新您的目标元素。

只是一个例子：

function updater() {
  $.ajax({
    url: 'src_to_script',
    dataType: 'json',
    sucess: function(data) {

       // updating your target elements
       $('#some_item1').text( data.Variable);
       $('#some_item2').text( data.Variable2);

       // call updater with 5 seconds interval
       setInterval(updater, 5000);

    }
  });
}

// initial call to updater
updater();