JavaScript 偏移/分页问题

Question

我正在调用本地 API 并尝试以分页 样式进行操作。我有 n 张图片，我想将它们分成 n/4 行(每行 4 张图片)。因此，我正在调用我的 API，images/count,offset。但不知何故，我在 console.log 中不断获得相同的结果，即前四个图像。

$(document).ready(function() {
    var offset = 0;
    var timesToRun = $('.container').data('rows');
    var images = [];

    for(var i = 1; i <= timesToRun; i++) {

        $.ajax('http://192.168.10.11/images/4,' + offset, {

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

            method: 'GET',

            success: function(data) {
                console.log('http://192.168.10.11/images/4,' + offset);
                offset = offset + 4;

                var currentSet = [];
                currentSet.push(data);

                console.log(currentSet);
            }

        });

    }

});

在 Laravel 中，我像这样提取图像数量:

public function selectWithOffset($count, $offset)
    {
        $selectionOfImages = \DB::table('images')->skip($offset)->take($count)->get();
        return response()->json($selectionOfImages);
    }

当我单击链接时，我确实收到了预期的响应。这里可能会出现什么问题？

Answer 1

问题出在你的 JavaScript 中。 $.ajax 默认情况下是异步的。for 循环将在调用 $.ajax 的任何成功回调之前完成，这是您增加偏移量的地方。

您必须选择解决此问题:

<强>1。使 $.ajax 同步

将 async: false 添加到 $.ajax 选项。

$.ajax('http://192.168.10.11/images/4,' + offset, {
    error: function(err) {
        console.log(err);
    },
    async: false,
    method: 'GET',
    success: function(data) {
        // ...
    }
});

<强>2。在成功回调之外增加 offset

for(var i = 1; i <= timesToRun; i++) {

    $.ajax('http://192.168.10.11/images/4,' + offset, {
        // ...
    });

    // Increment offset
    offset += 4;

}