在此 AJAX 调用循环上设置延迟

Question

我在我的 AJAX 调用中收到一个错误，并且似乎我需要在每次循环我的第二个 ajax 调用时设置延迟。但我不能让它工作。

这是我的第一个 ajax 调用，在这个 ajax 调用内部有一个 jquery，每个循环调用第二个 ajax 调用。我添加了 setTimeout 函数，但我仍然在控制台上收到错误消息“未捕获 RangeError：超出最大调用堆栈大小”

$.ajax({
            url: mysite.ajax_url,
            type: 'POST',
            data: {
                'action': 'test_ajax_function',
                'user_input': user_input_last
            },
            success:function(data) {
                $(".container").css("opacity", 1);
                $("#loading-img").css({"display": "none"});

                var array_data = data.split("||");

                var items_count = array_data[0];
                var items = array_data[1];



                jQuery.each(JSON.parse(items), function() {

                setTimeout(function(){    
                getItemDetails(this);
                }, 3000);

                });



            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        }); 

这是第二次 ajax 调用。

function getItemDetails(id) {

    var item_id = id;

        $.ajax({
            url: mysite.ajax_url,
            type: 'POST',
            data: {
                'action': 'getItem',
                'id': item_id
            },
            success:function(data) {

            console.log(data);

            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });    

}    


});

Answer 1

在您的第一个 ajax 调用中，不要将 this 作为 getItemDetails 的参数传递，这就是导致您的错误的原因。

因为似乎getItemDetails 期望参数是项目的 ID，所以这样做：

jQuery.each(JSON.parse(items), function(index, item) {
    getItemDetails(item.id);  //<------ I'm assuming 'id' is the name of the property
});