Question

我有一个ajax函数，可以加载下一页或结果而不刷新。这工作正常，但我打算做的是在循环中运行它，直到通过ajax调用加载某个元素。

的jQuery

var ajaxPageNumber = 2;
function infiniteResults() {
    $.ajax({
        type: 'GET',
        url: '/?page=' + ajaxPageNumber,
        success: function(data) {
            ajaxPageNumber +=1;
            if (data.length) {
                $('.table tbody').append(data);
            } else {
                $('<div class="text-center"><strong>No more results remaining.</strong></div>').insertAfter('.table');
            }
        }
    });
}

$(document).ready(function() {
        var i = 0;
        while (($('.desired-element').length < 1) && (i < 50)) {
            infiniteResults();
            i++
            console.log("More results loaded");
        }
    } else {
        console.log("Max tries reached, fail);
    }
});

我遇到的问题是它会立即触发我的所有50个循环ajax调用，因此它会将数据的第2页追加50次。即使在我的测试中，所需的元素在第4页上也会发生这种情况。

在jQuery / javascript中这样的事情是否可行？

Answer 1

所有电话都按顺序发生。如果不知道你的完整意图，我会拥有它，所以在它完成后只会再次调用infiniteResults，所以这些顺序发生而不是一起发生。

我没有测试过这个，但这就是我的想法......

var ajaxPageNumber = 2;

function infiniteResults() {
    $.ajax({
        type: 'GET',
        url: '/?page=' + ajaxPageNumber,
        success: function(data) {
            ajaxPageNumber += 1;

            if (data.length) {
                $('.table tbody').append(data);

                if (ajaxPageNumber < 50) {
                    infiniteResults(); // NEW
                }

            } else {
                $('<div class="text-center"><strong>No more results remaining.</strong></div>').insertAfter('.table');
            }
        }
    });
}

$(document).ready(function() {
    infiniteResults();
});

Answer 2

您可以返回$.ajax返回的承诺，并通过递归调用函数在一种循环中使用它（尽管由于异步性质，堆栈不会增长）：

＆＃13;

var ajaxPageNumber = 2;
function infiniteResults() {
    // return the jQuery promise
    return $.ajax({
        type: 'GET',
        url: '/?page=' + ajaxPageNumber,
        success: function(data) {
            ajaxPageNumber +=1;
            if (data.length) {
                $('.table tbody').append(data);
            } else {
                $('<div class="text-center"><strong>No more results remaining.</strong></div>').insertAfter('.table');
            }
        }
    });
}

$(document).ready(function() {
    (function repeat(i) {
        infiniteResults().done(function () {
            if ($('.desired-element').length == 0 && i < 50) {
                console.log("More results loaded");
                repeat(i+1);
            } else {
                console.log("Max tries reached, fail");
            }
        });
    })(0);
});

＆＃13;

运行一个循环，ajax加载更多元素，直到找到一个元素

2 个答案: