为什么没有使用指定的延迟进行ajax调用

时间:2016-08-14 15:54:25

标签: javascript jquery ajax asp.net-mvc

我正在尝试使用ajax在控制器上调用一个动作:10次,在我的MVC5应用程序中延迟2秒。

以下是我写的代码:

$(document).ready(function () {

    (function loop(i) {
        setTimeout(function() {
            var d = new Date();
            console.log(d.getTime());
            callAjax();
                console.log("works " + i);
                if (--i) loop(i); 
            },
            2000); // ms
    })(10);

    function callAjax() {
        $.ajax({
            url: '/Home/StartElection',
            type: 'POST',
            data: "test",
            async: true
        })
            .done(function (partialViewResult) {
                $("#partialTable").html(partialViewResult);
            });
    };
});
  

控制台日志符合预期(延迟时间为2秒),但是对控制器的调用会立即发生 - 当我在控制器上设置Visual Studio中断时,继续下一次调用后需要2ms

我无法理解为什么会这样 - 有人可以帮忙吗?

编辑:我在ajax调用&之前添加了Date.getTime()的控制台日志。每个

之间有2000毫秒

2 个答案:

答案 0 :(得分:0)

你必须单独更改此行async:true - > async:false 因为如果此属性设置为true,则AJAX调用将变为异步。 所以你的ajax调用没有时间延迟。 希望这会有所帮助。

答案 1 :(得分:0)

就您的客户端代码而言,就呼叫而言,它似乎运行良好。有了这一点,在处理ajax时需要考虑以下几点:

1)您可以控制可以呼叫远程服务的次数,但是您无法控制该服务响应所需的时间。

2)因此,对于大多数情况通常的好习惯是不在循环中进行ajax调用(这有点违背了ajax的一般目的)。而是使用对每个调用的响应然后进行下一个调用(但是当然我们需要确切地知道你正在构建什么来建议一个确切的解决方案)。

所以使用ajax最接近你想要的东西我觉得更像是这样:

$(document).ready(function () {

    /*(function loop(i) {
        setTimeout(function() {
            var d = new Date();
            console.log(d.getTime());
            callAjax();
                console.log("works " + i);
                if (--i) loop(i); 
            },
            2000); // ms
    })(10);*/

    var i=0;
    function callAjax() {
        var requestTimeMessage = "fetch #"+i+" at: "+new Date().getTime();
        console.log(requestMessage);

        $.ajax({
            url: '/Home/StartElection',
            type: 'POST',
            data: "test",
            async: true
        })
            .done(function (partialViewResult) {
                var requestTimeMessage = "response #"+i+" at: "+new Date().getTime();
                console.log(requestMessage);

                $("#partialTable").html(partialViewResult);
                i++;
                if(i<10) {
                    /*Note this assumes a quick response for each call.
                    * Otherwise the response together with this delay will total a wait longer than 2 seconds.
                    */
                    setTimeout(function() {
                        callAjax();
                    2000);
                }
            });
    };
});

但正如我所说。我需要确切地知道你想要达到的目的,以便为你的问题提供更合适的答案。