Javascript : Do Action after elapsed time

Question

我有一个页面，我在其中触发 ajax 请求并在用户按下按钮后的前 6 秒内显示加载标志:

<button onclick="runLoader();"></button>

<script>
    var startTime=(new Date).getTime();
    function runLoader(){
        runAjax();
        var i=0;
        var timer = setInterval(function(e){
            i++;
            //code for loading sign
            if(i==3)
                clearInterval(timer);
        } ,2000);
    }

    function runAjax(){
        $.ajax({
            //
        }).done(function(){
            var timer2 = setInterval(function(){
                var d = new Date();
                var t = d.getTime();
                if(t-startTime>=6000){
                    clearInterval(timer2);
                    // do X
                }
            },500);
        }
    }
</script>

我只想在 runLoader() 运行 6 秒并且 runAjax() 产生响应后才执行操作 X ，而且很快。

比如，如果 runAjax() 在 2 秒内响应，我仍然想继续显示加载标志 6 秒，然后执行 X。如果加载标志已显示 6 秒，我想等待 runAjax() 返回所需的时间。

但是使用 Date() 方法会给出不准确的结果。例如:即使只过去了 2 秒，它也显示已经过去 7.765 秒。我在某处读到我应该使用 console.log(time) 以获得更高的准确性，但它在 <=IE9 中不起作用。

有没有更好的方法来解决这个问题？

注意:我正在使用 setInterval() 而不是 setTimeout() 因为加载涉及循环遍历 3 个元素的数组，“Fetching”、“Processing”和“Loading”各显示 2 秒 :)

Answer 1

我会使用 deferreds和 $.when :

function start(){
    $.when(runLoader(), runAjax()).done(function() {
        //both are now finished
    });
}

function runLoader() {
    //show loader here

    var def = $.Deferred();

    setTimeout(function() {
        //hide loader here
        def.resolve(true);
    }, 6000);

    return def.promise();
}

function runAjax() {
    var def = $.Deferred();

    $.ajax({...}).done(function(result) {
        //handle response here
        def.resolve(true);
    });

    return def.promise();
}