Question

我遇到了问题而且我不知道如何进一步了解。

我有类似的东西。

function Paginator() {
    this.currentPage = 1;
};

Paginator.prototype.getCurrentPage = function() {
        return this.currentPage;
};

Paginator.prototype.getNextPage = function () {
    this.currentPage++;
    return this.getCurrentPage();
};

Paginator.prototype.getPreviousPage = function () {
    this.currentPage--;
    return this.getCurrentPage();
};

Paginator.prototype.setCurrentPage = function (page) {
    this.currentPage = page;
    return this.getCurrentPage();
};

Paginator.prototype.renderPage = function (page, data) {
    this.currentPage = page;
    this.pageList = [];
    for(i = 0; i < Math.ceil(75/12); i++)
    {
        this.pageList.push([i, (i-1)*12, i*12]);
    }
    for(i=this.pageList[page][1]; i < this.pageList[page][2]; i++) {
        var tmpl = "<article class='col-lg-3 col-md-4 col-sm-12 col-xs-12 video'><div class='video-image'><img class='img-responsive img' src='img/" + data[i].image + ".jpeg'><img class='player img-responsive' src='img/icon.png' width='75px' height='75px'></div><p class='video-title'><strong>" + data[i].title + "</strong></p><p class='video-timestamp'>" + data[i].timestamp + "</p></article>";
        $(".video-container").append(tmpl);
    }
};

这是我的paginator对象。

当我调用paginator.getCurrentPage（）;它将返回1，因为它是默认值。

但是，如果我调用renderPage（3，data）;它应该为页面3呈现第3页的数据及其工作。问题是这个渲染函数是在另一个函数中调用的，该函数是ajax函数的回调：

Loader.prototype.load = function (url, callback, from, to) {
    //load JSON from url
    var xhr = new XMLHttpRequest();
    var self = this;

    xhr.onreadystatechange = ensureReadiness.bind(self);

    function ensureReadiness() {
        if (xhr.readyState < 4) {
            return;
        }
        if (xhr.status !== 200) {
            return;
        }
        // all is well
        if (xhr.readyState === 4) {
            var JSONObject = JSON.parse(xhr.responseText);
            (to) == "all" ? to = JSONObject.length : to;
            callback(JSONObject, from, to);
        }
    }
    xhr.open('GET', url, true);
    xhr.send('');
};

Cache.prototype.load = function(data, from, to) {
    this.data = data;
    paginator.renderPage(3, data);

};

一切正常，它会加载正确的数据并显示它们，但在脚本的底部我有：

cache = new Cache();

paginator = new Paginator();

loader = new Loader();
loader.load("http://academy.tutoky.com/api/json.php",cache.load.bind(cache), 0, 30);

这应该调用调用cache.load函数的loader.load函数，该函数调用创建视图的paginator.renderPage函数，但是它也应该将paginator.currentPage设置为来自renderPage函数参数的某个值。它确实在paginator.renderPage函数的范围内，但是当我添加console.log（paginator.getCurrentPage（））;在整个脚本的底部，它将返回1，而不是页面参数中的值。

Answer 1

看起来问题是由于在您记录页码之前异步调用没有完成。我更新了fiddle以将console.log包装在回调中，如下所示：

loader.load("http://academy.tutoky.com/api/json.php",test, 0, 30);

function test(data, from, to) {
    cache.load(data, from, to);
    console.log(paginator.getCurrentPage());
}

显然，您可能希望了解一下如何改进我的命名！ ; O）

将数据设置为对象属性

1 个答案: