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

我正在开发一个基于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秒钟内显示。

这是最好的处理方式吗？或者有更优雅的解决方案吗？做这种事情的标准方法是什么？