使用 Javascript / jQuery 有效地跟踪和更新 DOM 元素的数组？

Question

在我正在编写的模块内部（它是一种滑块/时间轴界面组件）我有一种方法可以更新控件，这些控件是底部的一组可点击元素，在点击和更新时更新当用户滚动时。

我正在执行以下操作以将类附加到项目直到活跃的项目。虽然我使用的方法有效，但感觉效率很低，因为我每次都在一组 DOM 元素上循环。

     updateTimeLine : function(pos, cb) {

        var p = pos;
        var timeline = $('.timer').toArray();
        if (p > 15)
            p = 15;

        $.each(timeline, function(index,value) {
            var that = $(this);
            if (index >= p) {
                if (that.children('span').hasClass('active'))
                    that.children('span').removeClass('active');
            } else {
                that.children('span').addClass('active');
            }
        });

        if (cb && typeof(cb) === "function") {
            cb();
        }

        return this;
    },

有更好的方法吗？如果是，怎么做？

对于 observer pattern 这样的东西，这是一个很好的用例吗？我还没有完全理解，还没有花任何时间，所以如果是的话，我真的很想知道如何正确应用这个模式。

Answer 1

当发生相关更改时，观察者模式通过循环调用每个订阅者上的侦听器来通知订阅对象。因此，您可能最终还是会使用 $.each。我认为你所拥有的同样有效。

如果您对每次遍历 dom 都感到不爽，请考虑一下：没有这样的算法可以在不遍历每个 dom 元素的情况下更新它们。缓存 DOM 数组理论上会提高性能，但我的钱表明浏览器已经这样做了。亲自尝试一下 jsperf...

使用 Javascript / jQuery 有效地跟踪和更新 DOM 元素的数组？

Efficiently tracking and updating an array of DOM elements with Javascript / jQuery?

javascript

jquery

observer-pattern