Question

我正在尝试编写一个带有大数组的函数，并通过前一个和下一个按钮以一定数量的块来上下迭代。我有下一个按钮工作正常，但无法让它以我前进的方式反转阵列。这就是我所拥有的：

Javscript

success: function(data) {
    var body = data; 
    console.log(body.length);

    //body/data is a string
    var text = body.split(' ');
    text.chunk = 0; text.chunkSize = 15;
    var next = true;

    var increment = function(array,next) {
        if (array.chunk < array.length) {
            var slice = array.slice(
                array.chunk,
                Math.min(array.chunk + array.chunkSize, array.length));

            var chunk = slice.join(" ");
            if (next) {   
                array.chunk += array.chunkSize; 
                $( '#test' ).html('<p>' + chunk + '</p>');
            }
            else  {
                var slice = array.slice(
                    array.chunk,
                    Math.min(array.chunk+array.chunkSize, array.length));

                array.chunk -= array.chunkSize;
                $( '#test' ).html(chunk);
            }
        }
    }

    $("#prev").click(function() {
        increment(text);
    });

    $("#button").click(function() {
        increment(text, next);
    });
}

Answer 1

    success: function(data) {
    var body = data; 
    console.log(body.length);

    //body/data is a string
    var text = body.split(' ');
    text.chunk = 0; text.chunkSize = 15;

    var increment = function(array,next) {
        if(next) {
            array.chunk = Math.min(array.chunk + array.chunkSize, array.length);
        } else {        
            array.chunk = Math.max(array.chunk - array.chunkSize, 0);
        }
        var slice = array.slice(
            array.chunk,
            Math.min(array.chunk + array.chunkSize, array.length));

        var chunk = slice.join(" ");       
    }

    $("#prev").click(increment(text,false));

    $("#button").click(increment(text, true)); 
}

这是你需要的吗？快速编码，未经测试，请谨慎使用。

Answer 2

好的，首先我真的建议破解你的代码。看起来这是来自服务器的响应。我会在服务器的响应中解析数据就像你一样（旁注，为什么不从服务器返回json？）但是使用回调来处理分页。

var returnData = data.split(' ');
addPagination(returnData);

在addPagination下，我会处理DOM操作：

function addPagination(array) {
    $('#container').show();
    var incremental = incrementArray(array);

    var responseSpan = $('#response');
    $('#previous').click(function() {
        incremental.previous();
        showText();
    });

    $('#next').click(function() {
        incremental.next();
        showText();
    });
    showText();
    function showText() {
        responseSpan.text(incremental.array.join(', '));
    }
}

但是为了处理数组的实际移位，我会使用你自己以外的一些函数。这使用面向对象的JavaScript，因此它有点复杂。它将原始数组存储在内存中，并有2个方法（下一个，前一个），并有1个属性（数组）：

function incrementArray(array) {
    _increment = 2;
    var increment = _increment < array.length ? _increment : array.length;
    var index = -2;
    this.next = function () {
        var isTopOfArray = index + increment > array.length - increment;
        index = isTopOfArray ? array.length - increment : index + increment;
        this.array = array.slice(index, index + increment);
        return this.array;
    };

    this.previous = function () {
        var isBottomOfArray = index - increment < 0;
        index = isBottomOfArray ? 0 : index - increment;
        this.array = array.slice(index, index + increment);
        return this.array;
    };
    this.next();
    return this;

}

要测试它，请使用此jsFiddle。

如何以块的形式上下遍历大型javascript数组？

2 个答案: