如何使用while循环控制jQuery Ajax对控制器的调用次数

嘿，我看你想用counter来控制Ajax请求的次数，但原代码里的while循环踩了异步操作的经典坑——Ajax是异步执行的，而while是同步循环，它根本不会等你的success回调更新counter，会瞬间把10次请求全部发出去，完全达不到你想要的“根据回调结果控制次数”的效果。

给你改了个可行的方案，用递归函数来替代while循环，确保每次请求完成后再决定是否发起下一次：

var counter = 0;

$('#filter-form').submit(function (event) {
    event.preventDefault();
    alert("counter init = " + counter);
    
    // 定义递归函数来处理Ajax请求
    function makeAjaxRequest() {
        // 先判断是否达到次数上限，达到就停止
        if (counter >= 10) {
            return;
        }
        
        $.ajax({
            url: '/algorithm',
            method: 'GET',
            data: $('#filter-form').serialize() + "&counter=" + counter,
            success: function (data) {
                alert("The data is " + data);
                // 更新counter为返回的数值
                counter = parseInt(data);
                // 上一次请求成功后，发起下一次
                makeAjaxRequest();
            },
            error: function (xhr, status, error) {
                // 补全你原来没写完的错误处理
                var err = eval("(" + xhr.responseText + ")");
                alert("请求出错：" + err.Message);
                // 这里可以根据需求决定出错后是否继续请求，比如注释掉下面一行就停止
                // makeAjaxRequest();
            }
        });
    }
    
    // 触发第一次请求
    makeAjaxRequest();
});

为什么这样改？ #

• 递归函数会**等待上一次Ajax请求完成（不管成功还是失败）**后，再判断是否继续发起请求，完美解决了异步和同步的冲突
• 原代码里的立即执行函数(IIFE)其实是多余的，这里不需要用它来隔离作用域
• 我帮你补全了错误处理里的xhr.responseText，原来的代码这里没写完

这样就能真正实现“根据回调返回的data更新counter，再控制请求次数”的需求啦。

内容的提问来源于stack exchange，提问作者B K