跟踪已输出的JSON对象
我通过在加载页面时将索引设置为randomNumber()来随机输出20个左右的JSON对象。
我正在刷新每个已经在timeInterval上输出的JSON对象。 为了跟踪输出的JSON项目，我通过arrUsed.push[index]将每个项目的索引存储到一个数组中
现在尝试编写将单独update()每个JSON对象的函数，目前我仍然坚持如何用来自尚未输出的新JSON对象（推送到arrUsed[] ）的信息更新每个div。
这是我到目前为止的function：
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。
这是我之前提出的问题
这是JSON / AJAX Ticker的一个工作示例：
根据每个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数据填充我们的模板，这得益于.fadeIn()通过平滑的jQuery动画完成。
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()函数。 它首先递增我们的全局i变量并在它达到4时将其设置回1.然后我们在#product_元素上执行动画fadeOut()并等到它完成，直到我们再次调用load() 。 然后，它安排自己在另一个4.5秒内再次运行。
function tick() { i++; if (i == 4) { i = 1; } $('#product_' + i).fadeOut(function() { load(); }); setTimeout('tick()', tick_time); }
而已！
使用$.inArray() ： http ： $.inArray()
$.inArray(indexInQuestion, arrUsed);
如果元素不在数组中，它将返回-1 ，因此您将知道indexInQuestion添加到arrUsed 。