如何在页面加载上以及每个`setInterval()`时间段的ajax fire api呼叫

在这里：
我有一个简单的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服务器代码中呼叫并获得值。正如它应该。但这只是之后的页面加载。我想在页面加载上以及之后每三秒钟获取每三秒钟的值。我该怎么做？

将您的代码移至功能和settimeout。每3秒钟在Load 和上称其为：

<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

我会这样做：

<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>

在单独的函数中分开您的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>

正如您在此问题中看到的那样，如果要立即启动间隔，则应同时调用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秒更新数据。您可以为此使用EJ。

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

相关内容

最新更新

热门标签：