javascript - 更新加载 JSON 重复上次发布

Question

我制作了一个 JSON 脚本，它从 JSON 页面获取帖子，当用户向下滚动时，我重新加载以获取更多帖子，它工作得很好，但问题是当 JSON 第一次加载时它重复上一个帖子。这是一个live demo的脚本。

当您向下滚动到末尾时，您如何看到脚本显示更多帖子，但它重复上一篇名为“使用 3D Gallery 的 Blogger 自动幻灯片放映”的帖子。

HTML代码

<div id="result-container">
    <ol></ol>
    <span class="loading">Memuat...</span>
</div>

CSS 代码

#result-container {
  height:400px;
  width:400px;
  overflow:auto;
  margin:50px auto;
  font:normal normal 12px 'Trebuchet MS',Trebuchet,Geneva,Arial,Sans-Serif;
}

#result-container ol {
  margin:0 0;
  padding:0 0;
  background-color:#B5D68C;
}

#result-container li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#result-container li:nth-child(even) {background-color:#A2C179}

#result-container li a {
  display:block;
  padding:5px 10px;
  font-weight:bold;
  color:#396B18;
  text-decoration:none;
}

#result-container li a:hover {
  background-color:#396B18;
  color:white;
  text-decoration:none;
}

#result-container .loading {
  display:block;
  height:26px;
  font:normal bold 11px/26px Arial,Sans-Serif;
  color:white;
  text-align:center;
  background-color:#B75A6F;
  border-top:2px solid #222;
}

#result-container .loading.the-end {background-color:#666}

JavaScript 代码

var widget_config = {
    home_page: 'http://www.dte.web.id', // Your blog homepage
    container_id: 'result-container', // ID of the result container
    script_id: 'load-on-scroll-end-script', // ID of the asynchronous script
    max_result: 25, // Max result post at once script loading
    end_text: 'Habis' // End text if all posts has been loaded
};

var elem = document.getElementById(widget_config.container_id),
    inner = elem.getElementsByTagName('ol')[0],
    loading = elem.getElementsByTagName('span')[0],
    start = 0, // Dynamic start-index
    max = widget_config.max_result;

function grabList(json) {
    var list = json.feed.entry, link, skeleton = "";
    if (list !== undefined) {
        for (var i = 0; i < list.length; i++) {
            for (var j = 0; j < list[i].link.length; j++) {
                if (list[i].link[j].rel == "alternate") {
                    link = list[i].link[j].href;
                }
            }
            skeleton += '<li><a href="' + link + '">' + list[i].title.$t + '</a></li>';
        }
        inner.innerHTML += skeleton; // Insert the list to the container
        loading.style.display = "none"; // Hide the loading indicator
    } else {
        // If the JSON is empty (list == undefined),
        // add a new class to the loading indicator called `the-end`
        loading.className += ' the-end';
        // Replace the loading indicator text into `fully loaded!` for the example
        loading.textContent = widget_config.end_text;
    }
}

// Make an indirect script loader with two parameters: start-index and max-result post
function updateScript(a, b) {
    var head = document.getElementsByTagName('head')[0],
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.id = widget_config.script_id;
        script.src = widget_config.home_page + '/feeds/posts/summary?alt=json-in-script&start-index=' + a + '&max-results=' + b + '&callback=grabList';
    // If there is an old script in the document...
    if (document.getElementById(widget_config.script_id)) {
        var oldScript = document.getElementById(widget_config.script_id);
        // Remove the old script, and replace with the new one that has an updated start-index value
        oldScript.parentNode.removeChild(oldScript);
    }
    head.appendChild(script);
}

// Start loading the callback script with start-index of 1
updateScript(1, max);

// When the container is being scrolled...
elem.onscroll = function() {
    // ... check the scroll distance
    if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) {
        // If the distance equal to the height of the inner container...
        start++; // Increase the start value by one
        // then load the new script with an updated start-index
        updateScript(start*max, max);
        // and show the loading indicator
        loading.style.display = "block";
    }
};

Answer 1

似乎链接的 API 从索引 1 开始，在获取下一页时没有考虑到这一点。

试试 updateScript(start*max + 1, max);