Question

我正在通过在加载页面时将索引设置为randomNumber()来随机输出20个左右的JSON对象。

我正在刷新每个已经在timeInterval上输出的JSON对象。为了跟踪输出的JSON项目，我通过arrUsed.push[index]

将每个项目的索引存储到一个数组中

现在尝试编写将update()每个JSON对象单独编写的函数，目前我仍然坚持如何使用尚未输出的新JSON对象的信息更新每个div（推送到arrUsed[]）。

这是我到目前为止的功能：

function reloadItems() {
    var itemTotal = $('div.item').length; // Total number of items loaded initially
    var randomNumber=Math.floor(Math.random()*301) //returns number 
    index = randomNumber; // Sets index to be used in JSON data to random number
}

包含已输出索引的数组是全局声明的：arrUsed = [];当页面加载被正确存储到数组时，最初输出的每个项目都会被覆盖。这是一个选择随机JSON对象的问题，检查以确保它不在数组中/尚未输出，然后更新页面上的div。

这是previous question引领我到这一点

Answer 1

以下是JSON / AJAX Ticker的一个工作示例：

的 http://ticker.weisser.co/

根据twhyler的规格，它每4.5秒随机交换一个项目，跟踪已经看过的项目。一旦他们全部被人看到，它就会重新开始：

代码文件：

default.html （主程序）

template.html （产品模板）

UK.top.20.html （JSON数据）

ticker.js （jQuery）

ticker.css （样式表）

首先，我们应该将template.html存储在我们的全局template变量中并触发getJson()函数：

template = ''; .... $(document).ready(function () { $.get('template.html', function(html) { template = html; getJson(); }); });

然后，我们会将JSON存储到data变量中并触发initialize()函数：

data = ''; // JSON data will be stored here myurl = 'UK.top.20.html'; .... function getJson() { $.getJSON(myurl, function (JSON) { data = JSON; initialize(); }); }

在这里，我们将调用load()函数3次，立即用数据填充我们的3个产品div。然后我们将i设置回2（这样它将首先更改第3个DIV），并安排tick()在4.5秒内启动：

tick_time = 4500; .... function initialize() { // Start with the first 3 for (i = 1; i < 4; i++) { load(); } i = 2; setTimeout('tick()', tick_time); }

在我们解释load()函数之前，让我们来谈谈脚本底部的`String.prototype.f'：

String.prototype.f = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; }); };

此函数与C＃中的String.Format(formatstring, arg1, arg2, arg3...)或PHP中的sprintf($formatstring, arg1, arg2, arg3...)类似。这是一个例子：

formatstring = 'Roses are {0}, Violets are {1}, String.Format {2} and so do {3}!'; result = formatstring.f('red', 'blue', 'rocks', 'you'); alert(result);

正如您所看到的，这个String.prototype.f函数非常方便！

load()函数要做的第一件事就是设置rid = randomId();。我们接下来看一下randomId()函数。它首先要做的是从1-20获取一个数字（基于我们的JSON数据的长度）。然后，它会检查我们的seen数组是否与我们的JSON数据大小相同，如果是 - 它将其设置为0.接下来它确保我们的rid没有最近看到过，如果有的话，函数会递归地再次调用自己，直到它获得一个唯一的随机id。否则，我们会将rid存储在seen数组中并返回值。

function randomId() { rid = Math.floor(Math.random() * data.results.length); if (seen.length == data.results.length) { seen.length = 0; } if ($.inArray(rid, seen) == -1) { seen.push(rid); return rid; } else { return randomId(); } }
获取该随机ID后，在我们的load()功能中接下来，我们设置item和plat作为方便的快捷方式。 plat_html是Platform元素的临时存储位置。 for循环查看JSON中的所有Platform数据，并使用String.Format函数填充我们的plat_html字符串。

最后，我们允许i的当前值（它是全局的）确定哪个#product_得到更新，template.f用JSON数据填充我们的模板，这是通过平滑的jQuery动画完成的，这要归功于{ {1}}。

.fadeIn()

最后，我们来看看递归function load() { rid = randomId(); item = data.results[rid]; plat = item.Platform; plat_html = ''; for (var j = 0; j < plat.length; j++) { plat_html += plat_fmt.f( plat[j].Hardware, plat[j].Market ); } $('#product_' + i).html( template.f( item.Image, item.id, item.AgeRating, item.WikiUrl, item.Title, item.Source, item.Genre, plat_html ) ).fadeIn(); }函数。它首先递增我们的全局tick()变量，并在它达到4时将其设置回1.然后我们在i元素上执行动画fadeOut()并等待它完成，直到我们调用{ {1}}再次。然后，它会安排自己再在4.5秒内再次运行。

#product_

就是这样！

Answer 2

使用$.inArray()：http://api.jquery.com/jQuery.inArray/

$.inArray(indexInQuestion, arrUsed);

如果元素不在数组中，它将返回-1，因此您将知道已将indexInQuestion添加到arrUsed。

跟踪已输出的JSON对象

2 个答案: