为啥不以指定的延迟进行 ajax 调用

Posted 2023-05-08

【中文标题】为啥不以指定的延迟进行 ajax 调用

【英文标题】：Why aren't ajax calls being made with a specified delay为什么不以指定的延迟进行 ajax 调用

【发布时间】：2016-12-21 00:00:10

【问题描述】：

我正在尝试在我的 MVC5 应用程序中使用 ajax 调用控制器上的操作：10 次，延迟 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 中对控制器操作设置中断时，继续后的下一个调用需要 2 毫秒

我不明白为什么会这样 - 任何人都可以帮忙吗？

编辑：我在 ajax 调用之前添加了 Date.getTime() 的控制台日志，并且每个之间有 2000 毫秒

【问题讨论】：

如何检查？

我在被调用的动作上有一个断点，一旦我继续它就会再次到达断点

嗯，你的代码对我有用jsfiddle.net/j8eouz1w/1

@NRKirby 好的，我不太了解 VS IDE 和断点语句，但可以肯定的是，您的客户端发布的代码没有任何问题。问题是 ajax 是异步的，您的代码客户端在下一次循环迭代之前不会等待任何 ajax 响应

@NRKirby 您的代码应该是这样的，例如：jsfiddle.net/j8eouz1w/3 这样，如果您的任何 ajax 请求需要超过 2 秒才能完成，它不会发送任何并行请求（如果之前有任何请求）仍在运行。查看一些阅读：reallifejs.com/brainchunks/repeated-events-timeout-or-interval

【参考方案1】：

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

【参考方案2】：

就您的客户端代码而言，就调用而言，它似乎运行良好。话虽如此，在处理 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);
                
            );
    ;
);

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