Question

初学者：
我有一个简单的AJAX组件，每隔3秒执行一次GET API调用：

<script>
    $(document).ready(
        function() {

            setInterval(function() {
                $.get('/value_one', function(res) {
                    $('#value_one').text(res);
                });
                $.get('/value_two', function(res) {
                    $('#value_two').text(res);
                });
            }, 3000);
        }
    );
</script>

这完全正常......它每三秒钟调用一次我的NodeJS服务器代码并获取值;正如它应该。但这只是在页面加载后的。我想在页面加载时获取值，并在此之后每三秒获取一次。我该怎么做？

Answer 1

我会这样做：

<script>
var loadValues = function() {
    $.get('/value_one', function(res) {
        $('#value_one').text(res);
    });
    $.get('/value_two', function(res) {
        $('#value_two').text(res);
    });
};

$(document).ready(
    function() {
        loadValues();
        setInterval(loadValues, 3000);
    }
);
</script>

Answer 2

如您所见in this question，如果您希望立即开始间隔，则应同时调用setInterval和该函数。

<script>
    function call() {
        $.get('/value_one', function(res) {
            $('#value_one').text(res);
        });

        $.get('/value_two', function(res) {
             $('#value_two').text(res);
        });
    }

    $(document).ready(function () {
        call();
        setInterval(call, 3000);
    });
</script>

但实际上我认为最好的选择是首次从服务器渲染数据，然后你只需要间隔来每3秒更新一次数据。您可以使用ejs。

另一个想法，我认为你需要在最后一次更新后3秒（服务器响应后）刷新，而不是每3秒刷新一次。

Answer 3

在单独的函数中分离您的AJAX调用：

function loadAjax() {
    $.get('/value_one', function(res) {
        $('#value_one').text(res);
    });

    $.get('/value_two', function(res) {
        $('#value_two').text(res);
    });
 }

然后在setInterval中使用它，并在文档加载后按如下方式使用：

<script>

    //declare ajax request as separate function
    function loadAjax() {
        $.get('/value_one', function(res) {
            $('#value_one').text(res);
        });

        $.get('/value_two', function(res) {
            $('#value_two').text(res);
        });
    }

    //call once after page is loaded
    loadAjax();

    $(document).ready(
        //use the same in setInterval
        setInterval(loadAjax, 3000);
    );
</script>

Answer 4

将代码移至function和setTimeout。每隔3秒在负载和上调用它：

<head>
  <script>
    function loadValue() {
      $.get('/value_one', function(res) {
        $('#value_one').text(res);
      });
      $.get('/value_two', function(res) {
        $('#value_two').text(res);
      });

      setTimeout(loadValue, 3000);
    }

    loadValue();
  </script>

这样你的功能会每隔3秒调用一次，不需要 domready

如何在页面加载以及每个`setInterval（）`时间段上调用AJAX fire API？

4 个答案: