3

我通过randomNumber()在页面加载时将索引设置为 a 来随机输出 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。

这是导致我这一点的上一个问题

4

2 回答 2

2

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

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

JSON/AJAX 代码

代码文件：

首先，我们应该将 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]; }); };

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

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(); }
}

接下来在我们的load()函数中获得该随机 ID 后，我们设置item和plat作为方便的快捷方式。 plat_html是平台元素的临时存储位置。for 循环查看我们 JSON 中的所有平台数据，并使用我们的 String.Format 函数来填充我们的 plat_html 字符串。

最后，我们允许 i 的当前值（它是全局的）确定哪个#product_被更新，并template.f用 JSON 数据填充我们的模板，这要归功于.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()函数。它首先增加我们的全局i变量并在它达到 4 时将其设置回 1。然后我们fadeOut()对我们的#product_元素执行动画并等待它完成直到我们load()再次调用。然后，它安排自己在另外 4.5 秒内再次运行。

function tick() {
i++; if (i == 4) { i = 1; }
$('#product_' + i).fadeOut(function() { load(); });
setTimeout('tick()', tick_time);
}

就是这样！

于 2013-01-12T23:47:31.437 回答
0

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

$.inArray(indexInQuestion, arrUsed);

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

于 2013-01-12T00:01:51.503 回答