JavaScript 偏移/分页问题答案

【问题标题】：JavaScript offset/pagination issueJavaScript 偏移/分页问题
【发布时间】：2016-03-16 13:11:13
【问题描述】：

我正在调用我的本地 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);
    }

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

【问题讨论】：

你的路线是什么样的？
Route::get('/images/{count},{offset}', 'ImageController@selectWithOffset');
首先转储传递给控制器的值 - 你会知道它是与控制器逻辑有关还是发送/解析路由参数

标签： javascript php laravel pagination

【解决方案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;

}

【讨论】：