Question

我有一个从api收集数据的html文档。在检索数据时，有一个加载时间，通常为1-3秒。我希望在数据加载时合并一个微调器或某种类型，无论是spin.js还是gif，因此用户知道正在检索数据。如何在加载数据时添加微调器到函数loaddata（）？

这是我的代码：

<script type="text/javascript" src="http://api.eventful.com/js/api"></script>
<script type="text/javascript">
    //Function which loads data from API.
    function loaddata() {
        //get vars 
        var oArgs = {
            app_key: "(HIDDEN FOR SECURITY PURPOSES)",
            q: "music",
            where: "San Diego", 
            "date": "2013061000-2015062000",
            page_size: 5,
            sort_order: "popularity",
        };

        var content = '';

        //API CALL
        EVDB.API.call("/events/search", oArgs, function(oData) {
            console.log(oData)
            //Get the title for each item
            for (var i = 0;i < oData.events.event.length;i++) {
                content += oData.events.event[i].title + '<br><br>';
            }

            // Show Data on page
            $("#ListItems").html(content);
        });
    }
</script>
<body>
    <input type = "button" id="target" value="search" onclick="loaddata();"/>
    <br><br>

    //Where Data is presented.
    <span id = "ListItems"></span>
</body>
</html>

Answer 1

实现此目的的典型方法是在请求远程数据时显示微调器/加载图形，并在请求完成时隐藏微调器。在您的情况下，您可以执行以下操作：

$spinner = $('#loadingSpinner'); //element that contains spinner

//API CALL
$spinner.show();

EVDB.API.call("/events/search", oArgs, function(oData) {
    console.log(oData)
  // Hide spinner
  $spinner.hide();
  //Get the title for each item
  for (var i = 0;i < oData.events.event.length;i++){
    content += oData.events.event[i].title + '<br><br>';
  }
      // Show Data on page
      $("#ListItems").html(content);
    });
}

来自API的数据被拉动（Javascript）

1 个答案: