javascript - 将 javascript 间隔存储在 jQuery element.data 对象中？

Question

我正在开发一个名为 Smooth Div Scroll 的 jQuery 插件(一个 jQuery UI 小部件)。我需要存储对页面上插件的每个单独实例特定的间隔的引用。如果我只是写这样的东西:

var myInterval = setInterval(function() {  
    alert("Hi!");  
}, 100);

...变量 myInterval 实际上是 window.myInterval 并且它将被页面上插件的所有实例共享。因此，当我尝试设置或清除实例的间隔时，所有实例的间隔都将被设置/清除，因为它们都引用相同的窗口变量。

通过 jQuery API，我找到了方法 .data它用于存储与匹配元素关联的任意数据，并且因为插件的每个实例都有一个相应的 DOM 元素。完美的!使用此方法，我可以存储特定于匹配元素的数据。所以我的代码结构如下(其中 el 是对匹配元素的引用):

el.data("myInterval", setInterval(function() {  
    alert("Hi!");  
}, 100));

在某种程度上，这是有效的，因为插件的不同实例不再引用相同的变量(间隔)。但我注意到，如果我的页面有 2-3 个插件实例，并且我为每个实例设置了相同的间隔，则只有第一个实例开始其间隔。但如果间隔计时器很小，则只有部分元素开始间隔。

我没有对实际值进行任何深入挖掘，但如果我在一页上有该插件的三个实例并且间隔设置为 5，如下所示:

el.data("myInterval", setInterval(function() {  
    alert("Hi!");  
}, 5));

...只有第一个实例才会启动。如果我将其增加到 20-30，其中两个实例将启动，如果我进一步将其增加到 50，则所有三个实例都会启动。这有这么奇怪吗？!

我的问题是:

存储对间隔的引用(使用 .data)是个好主意吗？ 如果是这样，间隔失败的原因可能是什么？

请帮我解决这个问题 - 我很难过! 如果您想要实际的源代码，请查看插件页面(链接位于本文顶部)。

/托马斯·卡恩

Answer 1

setInterval 和 setTimeout 的返回值只是内部使用的整数来引用超时，因此使用 .data 存储整数不是问题。