我有一个html文档，它从api收集数据。检索数据时，会有一个加载时间，通常为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>
最佳答案
实现此目的的典型方法是在请求远程数据时显示微调器/加载图形，并在请求完成时隐藏微调器。在您的情况下，您可以执行以下操作：
$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);
});
}