JavaScript偏移/分页问题

Question

我正在调用我的本地API并尝试以pagination样式执行此操作。我想要的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;

}