3

我正在开发一个名为Smooth Div Scroll的 jQuery 插件（一个 jQuery UI 小部件） ，我需要在其中存储对特定于页面上每个插件实例的间隔的引用。如果我只是写这样的东西：

var myInterval = setInterval(function() {  
    警报（“嗨！”）；  
}, 100);

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

通过 jQuery API，我发现了.data方法，它用于存储与匹配元素关联的任意数据，因为插件的每个实例都有一个对应的 DOM 元素。完美的！使用这种方法，我可以存储特定于匹配元素的数据。所以我像这样构建了我的代码（其中 el 是对匹配元素的引用）：

el.data("myInterval", setInterval(function() {  
    警报（“嗨！”）；  
}, 100));

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

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

el.data("myInterval", setInterval(function() {  
    警报（“嗨！”）；  
}, 5));

...只有第一个实例会启动。如果我将其增加到 20-30，则其中两个实例将启动，如果我将其进一步增加到 50，则所有三个实例都将启动。这太诡异了？！

我的问题是：

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

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

/托马斯·卡恩

4

2 回答 2

1

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

于 2010-08-03T18:31:54.667 回答
0

深入研究了代码并进行了一些探索，似乎问题与 el.data 中间隔的存储无关。间隔存储得很好。我怀疑这个问题与在代码中以错误顺序执行的例程有关。正确的顺序应该是：

  1. 使用 jQuery 的 load() 加载一大块 HTML 内容（图像）。
  2. 计算所有这些元素的总宽度。
  3. 开始滚动这些图像的间隔。

问题似乎是计算所有元素的总宽度的例程在使用jQuery加载通过AJAX加载内容之前/同时触发。结果是加载元素的计算总宽度为 0（零），并且滚动例程停止，因为滚动宽度为零的东西没有意义。

于 2010-08-04T09:29:00.080 回答