Question

我正在使用基于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);
}

我现在看到的设置问题是，如果数据库查询需要5秒钟，结果实际上会在8秒内显示。

这是处理此问题的最佳方法吗？还是有更优雅的解决方案？做这种事情的标准方法是什么？

Answer 1

您可以在xmlhttpPost()函数中执行此操作：

使用开始时的当前时间设置变量;
添加/显示您的图片;
在onreadystatechange比较当前时间与开始时设置的时间，如果差异为3秒或更长时间，请删除图像。否则设置剩余时间的超时并删除图像。

JavaScript：为表单添加时间加载功能

1 个答案: