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

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

如您在此问题中看到的，如果您希望间隔立即开始，则应同时调用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

将您的代码移到函数和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秒调用一次，而无需进行准备

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

问题描述

4 个解决方案

解决方案1
0 2017-09-25 09:49:36

解决方案2
0 2017-09-25 09:51:31

解决方案3
0 2017-09-25 09:51:44

解决方案4
0 已采纳 2017-09-25 09:53:26

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

问题描述

4 个解决方案

解决方案1 0 2017-09-25 09:49:36

解决方案2 0 2017-09-25 09:51:31

解决方案3 0 2017-09-25 09:51:44

解决方案4 0 已采纳 2017-09-25 09:53:26

解决方案1
0 2017-09-25 09:49:36

解决方案2
0 2017-09-25 09:51:31

解决方案3
0 2017-09-25 09:51:44

解决方案4
0 已采纳 2017-09-25 09:53:26