JavaScript : Add time loading function for form

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秒或更多，则删除图像。否则设置剩余时间超时并删除图像。