Javascript：在经过时间后执行操作

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

<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>

var startTime=（新日期）.getTime（）；
函数runLoader（）{
runAjax（）；
var i=0；
var定时器=设置间隔（功能（e）{
i++；
//装货标志代码
如果（i==3）
清除间隔（计时器）；
} ,2000);
}
函数runAjax（）{
$.ajax({
//
}).done（函数（）{
var timer2=setInterval（函数（）{
var d=新日期（）；
var t=d.getTime（）；
如果（t-startTime>=6000）{
清除间隔（计时器2）；
//多克斯
}
},500);
}
}

只有在

runLoader（）

运行了6秒并且

runAjax（）

产生响应后，我才想执行操作X

比如，如果runAjax（）在2秒钟内响应，我仍然希望继续显示加载符号6秒钟，然后执行X。 如果加载符号已经显示了6秒钟，我想等待runAjax（）返回，等待时间越长越好

---

但是使用

Date（）

方法会给出不准确的结果。例如：它显示7.765秒已经过去，即使只过去了2秒。我在某个地方读到了一些信息，我应该使用

console.log（time）

来提高准确性，但它在中不起作用。我会设置一个标志将其标记为“就绪”.也许有更好的方法来处理这个问题，但这只是我的想法

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

    function runAjax(){
        var timeElapsed = false;
        setTimeout(function(){timeElapsed = true}, 6000);
        $.ajax({
            //
        }).done(function(){
            var timer2 = setInterval(function(){
                if(timeElapsed){
                    clearInterval(timer2);
                    // do X
                }
            },500);
        }
    }
</script>

函数runLoader（）{
runAjax（）；
var i=0；
var定时器=设置间隔（功能（e）{
i++；
//装货标志代码
如果（i==3）
清除间隔（计时器）；
} ,2000);
}
函数runAjax（）{
var timeappeased=false；
setTimeout（函数（）{timeappeased=true}，6000）；
$.ajax({
//
}).done（函数（）{
var timer2=setInterval（函数（）{
如果（时间流逝）{
清除间隔（计时器2）；
//多克斯
}
},500);
}
}

我会设置一个标志将其标记为“就绪”。可能有更好的方法来处理这个问题，但这只是我的想法

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

    function runAjax(){
        var timeElapsed = false;
        setTimeout(function(){timeElapsed = true}, 6000);
        $.ajax({
            //
        }).done(function(){
            var timer2 = setInterval(function(){
                if(timeElapsed){
                    clearInterval(timer2);
                    // do X
                }
            },500);
        }
    }
</script>

函数runLoader（）{
runAjax（）；
var i=0；
var定时器=设置间隔（功能（e）{
i++；
//装货标志代码
如果（i==3）
清除间隔（计时器）；
} ,2000);
}
函数runAjax（）{
var timeappeased=false；
setTimeout（函数（）{timeappeased=true}，6000）；
$.ajax({
//
}).done（函数（）{
var timer2=setInterval（函数（）{
如果（时间流逝）{
清除间隔（计时器2）；
//多克斯
}
},500);
}
}

我会使用和：

我将使用和：

---

您可以创建一个在runLoader（）上运行的预调用函数，作为runAjax（）的回调函数，该函数将验证其他操作是否完成，然后执行操作X。示例：

var ajaxDone = false;
var loaderDone = false;
function doActionX() {
    //your action happens here
}
function tryToDoX() {
    if (ajaxDone && loaderDone) {
        doActionX();
    }
}
function runLoader(){
    loaderDone = false;
    runAjax();
    //show loading sign
    setInterval(function(e){
        //hide loading sign
        clearInterval(timer);
        loaderDone = true;
        tryToDoX();
    }, 6000);
}

function runAjax(){
    ajaxDone = false;
    $.ajax({
        //whatever
    }).done(function(){
        ajaxDone = true;
        tryToDoX();
    }
}

无需重复超时并轮询这两种状态，因为它们只完成一次（在每次运行中，即布尔值在等待时不会设置为false和true）

---

编辑：此方法可用于任何不会间歇性更改状态的异步代码，即使没有jQuery。

您可以创建一个在runLoader（）上运行并作为runAjax（）回调的预调用函数，该函数将验证其他操作是否完成，然后执行操作X。示例：

var ajaxDone = false;
var loaderDone = false;
function doActionX() {
    //your action happens here
}
function tryToDoX() {
    if (ajaxDone && loaderDone) {
        doActionX();
    }
}
function runLoader(){
    loaderDone = false;
    runAjax();
    //show loading sign
    setInterval(function(e){
        //hide loading sign
        clearInterval(timer);
        loaderDone = true;
        tryToDoX();
    }, 6000);
}

function runAjax(){
    ajaxDone = false;
    $.ajax({
        //whatever
    }).done(function(){
        ajaxDone = true;
        tryToDoX();
    }
}

无需重复超时并轮询这两种状态，因为它们只完成一次（在每次运行中，即布尔值在等待时不会设置为false和true）

---

编辑：这种方法可以用于任何不间断更改状态的异步代码，即使没有jQuery也是如此。

为什么不使用SetTimeout（）？？这是一个即兴响应，因此如果我没有充分研究您的代码，请原谅，但问题是否只是您何时捕获starttime的问题？也就是说，您表示您获取的值对于所用时间来说太大，并且您捕获的starttime似乎超出了任何函数，这意味着就您的目标而言，现在还为时过早。抱歉，如果我只是误解了您的意思！您是否考虑过使用承诺？您可以单独解决这两个问题，然后在两者都完成后继续。使用

setTimeout

和几个布尔标志会简单得多，但我不清楚您到底想要实现什么这3种状态应该得到正确处理，这样当你说“加载”时，你实际上是在加载（而不仅仅是在你发明的时间方案中的某个任意点）？？这是一个即兴响应，因此如果我没有充分研究您的代码，请原谅，但问题是否只是您何时捕获starttime的问题？也就是说，您表示您获取的值对于所用时间来说太大，并且您捕获的starttime似乎超出了任何函数，这意味着就您的目标而言，现在还为时过早。抱歉，如果我只是误解了您的意思！您是否考虑过使用承诺？您可以单独解决这两个问题，然后在两者都完成后继续。使用

setTimeout

和几个布尔标志会简单得多，但我不清楚您到底想要实现什么这三种状态应该得到正确的处理，这样当你说“加载”时，你实际上是在加载（而不仅仅是在你发明的时间方案中的某个任意点）。使用setInterval确实会混淆这个问题