如何在JavaScript中创建定时队列

Question

好的。我没有这个问题的代码。我问这个问题是因为我刚学习javascript。我想知道如何在JS中创建一个定时队列。下面是关键点。

我有一个下拉框。下拉框背后有extjs数据存储器，每5秒钟更新一次数据，即下拉框将获得新的行条目。

行条目可以分为三种类型1、2和3。同一类型但不同行id的行可能有多行。如果某行在5分钟内没有更新，则该行将从下拉框中删除。这意味着如果我从存储器中获取了新的类型为3的行，则它将在下拉框中停留5分钟。如果相同的行（具有相同的id和类型）出现在新获取的数据中，则5分钟计时器将被重置，并再次计算5分钟。如此往复。

如何在javascript中实现此功能。

如果不理解，请写评论。

以下是示例：

row_1 type1 5 min timer start
row_2 type1 5 min timer start
row_3 type3 5 min timer start
row_2 type2 5 min timer start

这是当前获取的数据示例。3分钟后我会得到这些数据。

row_3 type3 5 min timer start

其余行的计时器会继续运行，直到达到5分钟限制，但对于第三行，计时器将被重置，并将留在组合框中，直到下一个5分钟。

- Vlad

---

如果您想让某个操作以固定的时间间隔发生，您需要使用“setInterval”命令。 - Paul Tomblin

@Vlad - 你从来没有找到合适的答案吗？你没有对任何答案或问题本身发表评论。 - FrankieTheKneeMan

Answer 1

你需要跟踪两个东西：实际项目和上次更新的时间（或者更准确地说，将更新它的超时事件）。

timeouts = [];
elems = [];
function updateElem(no){
    //Do your update on elems[no]
    clearTimeout(timeouts[no]);
    timeouts[no] = setTimeout(function(){ removeElem(no) }, 5*60*1000 );
}
function removeElem(no){
    //Remove the element.
}

这展示了基本概念。有更好的方法来保持所有内容的联系，但基本思路是：

• 在对象上设置一个超时时间，在五分钟后将其移除
• 更新对象时：
  • 清除以前的超时时间
  • 设置新的超时时间

由于JS不是真正的多线程，只要您理解作用域，就不必担心并发问题。

查看此文档以了解超时事件的更完整工作方式。

- FrankieTheKneeMan

Answer 2

其他地方：

function ComboRemoval(id)
{
    Lookup your combobox (document.findelementbyid perhaps)
    Find element with value "id"
    remove it
}

向组合框添加元素时：

Add the element
setInterval(function() { ComboRemoval(1234)}, 300000);  //FIXED AS PER COMMENTS BELOW

setInterval将在5分钟后触发ComboRemoval函数，并从框中删除ID 1234。

300000 = 5分钟（1000 = 1秒，60 x 5 = 300秒，300 x 1000 = 300000）

- Gherkin

---

setInterval(ComboRemoval(1234), 300000); 不会实现你想要的效果。这会立即调用 ComboRemoval，而不是在计时器触发时调用它。 - jfriend00

这将在五分钟后删除所有内容，而不是那些在过去五分钟内未更新的项目。clearTimeout将是实现OP所需效果所必需的。 - FrankieTheKneeMan

Answer 3

你需要使用一个调用setTimeout()的递归函数。

例如：

function myFunc() {
    var minutes = 5;
    //do stuff here
    setTimeout(function() { myFunc() }, minutes*60000 }; 
}

当调用myFunc()时，它将触发并在5分钟计时器上调用自身。程序的其余逻辑完全依赖于最终结果。

- Mike H.

---

这不是一个错误 - 只是对你的自我记录变量的挑剔：minutes实际上保存了要等待的秒数。此外，这将每5分钟更新一次，这可能是或可能不是OP想要的。 - FrankieTheKneeMan

@Frankie 是的，我同意...通常我只在一个地方分配时间变量，setTimeout() 调用，而且我一直在 setTimeout() 内部进行毫秒 (1000) 乘法。不过谢谢你指出来，如果这会立即引起与此问题相关的混淆，我会为大众改变它 =) - Mike H.

Answer 4

在 @Gherkin 的回答基础上，使用 jQuery：

function addOption(key, text, timeout) {

    var el = $("<option></option>")
         .attr("value",key)
             .text(text);
    ​$('#test').append(el);
    setTimeout(function() { el.remove(); }, timeout);
}

现在您可以拨打电话：

addOption("value", "Text for option", 2000);

看它如何运作：http://jsfiddle.net/um9Cu/

您可以扩展addOption()，以便查找具有该键的现有项目并延长超时时间，或者进行任何其他必要的操作。

- gregmac

Answer 5

我通过使用会话(session)解决了这个问题。最新的数据被写入到会话中，所以新的请求是根据会话中的数据进行的。我同时使用了PHP和JS。JS通过PHP会话读取数据。

- Vlad