JavaScript:为表单添加时间加载功能
JavaScript : Add time loading function for form
我正在开发一个基于JavaScript/Ajax的本地注册表单。该表单使用Ajax函数将数据发送到PHP引擎,该引擎查询数据库等等。
我想知道如何使用JavaScript添加加载函数,以便在查询PHP时显示加载动画。
理想情况下,我希望设置某种if
语句来检查查询需要多长时间,并且只在最短的时间(如3秒(后返回结果。否则,加载动画只会闪烁,因为数据库查询太快。
JS看起来是这样的:
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
// send form data
function getquerystring() {
var form = document.getElementById('register-form');
var firstname = document.getElementById('firstname').value;
qstr = 'firstname=' + escape(firstname);
return qstr;
}
// return form data
function updatepage(str){
var result = document.getElementById("result");
result.innerHTML = str;
}
所以我想做的是,当updatepage(str)
运行时,加载动画(可以是gif(运行至少3秒,然后显示结果。
我现在拥有的是:
function updatepage(str){
var result = document.getElementById("result");
// display gif;
setTimeout(function(){
// remove GIF
result.innerHTML = str;
},3000);
}
我现在看到的关于如何设置它的问题是,如果DB查询需要5秒钟,那么结果实际上将在8秒钟内显示。
这是最好的处理方式吗?或者有更优雅的解决方案吗?做这种事情的标准方法是什么?
您可以在xmlhttpPost()
函数中完成这一切:
- 在开始时用当前时间设置一个变量
- 添加/显示您的图像
- 在
onreadystatechange
中,将当前时间与开始时设置的时间进行比较,如果差值大于等于3秒,则删除图像。否则,设置剩余时间的超时,然后删除图像
相关文章:
- 对于加载时间过长的循环来说是巨大的
- 谷歌如何确定网站加载时间
- 指令加载真的很长,检查加载时间的方法
- 尝试从控制器加载带有json数据的Simile时间线
- Jquery时间启动计时器,我有一个计时器的代码,但它在页面加载时启动
- 如何使用队列呈现多个HighCharts以防止加载时间过长
- Javascript加载时间过长
- 如何在特定时间重新加载page.php,例如:07:45.非持续时间,例如:每5秒
- 如何从某个时间开始预加载HTML5视频
- 如何计算angular JS应用程序(单页应用程序)的页面加载时间
- 在正确的时间加载缓存的字体
- 在特定时间加载网站的部分内容
- audio.js:是否可以在特定时间加载音频
- 我怎么能得到不同的部分/框/图像我的网站在同一时间加载
- MVC淘汰.儿童下载列表没有't第一时间加载模型数据
- 三星智能电视时间加载问题
- 包括花很长时间加载,你可以看到他们加载
- JavaScript:为表单添加时间加载功能
- IE:HTML选择与巨大的选项需要大量的时间加载
- Angularjs下拉多选需要很长时间加载