Question

$(document).ready(function() {

    var callAjax = function() {
        $.getJSON('my_data.json', function(jd) {
            $("#main").html("<p> Temperature: " + jd.Temperature + "</p>");
            $("#main").append("<p>  Temperature: " + jd.Temperature2 + "</p>");
            $("#main").append("<p> Humidity: " + jd.Humidity + "</p>");
        });
    }
    setInterval(callAjax, 2000);
});

上面显示的代码用于每2秒调用一次ajax并从json文件更新值。问题是我想在开头显示这些paragrpahs，其中包含当前在json文件中的值，然后每两秒更新一次，就像在代码中一样。现在当我运行这个html文件时，它首先等待两秒然后调用ajax。有没有办法立即显示值，然后每两秒调用一次函数调用callAjax自动更新它们？

Answer 1

也许解决方案就是这个

    $(document).ready(function() {

    var callAjax = function() {
            $.getJSON('my_data.json', function(jd) {
                $("#main").html("<p> Temperature: " + jd.Temperature + "</p>");
                $("#main").append("<p>  Temperature: " + jd.Temperature2 + "</p>");
                $("#main").append("<p> Humidity: " + jd.Humidity + "</p>");
            });
            }
      callAjax();
      setInterval(callAjax, 2000);      
    });

Answer 2

请求页面时，请阅读文件并填写内容，以便在页面加载时立即显示在PHP中它看起来像这样。

<?php
$data = json_decode(file_get_contents('mydata.json'));
?>
<div id="main">
    <p>Temperature: <?= $data.temperature ?></p>
    <p>Temperature: <?= $data.Temperature2 ?></p>
    <p> Humidity: <?= jd.Humidity ?></p>
</div>

Answer 3

是：

var callAjax = (function () { ... }());

注意它们的括号，它是一个自我调用函数。

Answer 4

所以......你已经定义了一个函数：

var callAjax = function() {
  //...
};

并且您已将其设置为每隔一段时间运行一次：

setInterval(callAjax, 2000);

现在你只想立即执行一次？好吧，执行一个函数非常简单：

callAjax();

所以将它们放在一起似乎很简单：

var callAjax = function() {
  //...
};

setInterval(callAjax, 2000);
callAjax();

Answer 5

在使用setInterval：

之前调用callAjax函数

callAjax();
setInterval(callAjax, 2000);

Answer 6

var i = true;
     function callAjax(){
        i = false;
        $.getJSON('my_data.json', function(jd) {
            $("#main").html("<p> Temperature: " + jd.Temperature + "</p>");
            $("#main").append("<p>  Temperature: " + jd.Temperature2 + "</p>");
            $("#main").append("<p> Humidity: " + jd.Humidity + "</p>");
        });
        }
     }
var $callajax = i == true ? callAjax() : setInterval(function(){ callAjax() },2000);

Jquery在使用setInterval之前显示内容

6 个答案: