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

【问题标题】：Efficiently tracking and updating an array of DOM elements with Javascript / jQuery?使用 Javascript / jQuery 有效地跟踪和更新 DOM 元素数组？
【发布时间】：2015-02-18 21:29:08
【问题描述】：

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

我正在执行以下操作以将类附加到直到活动的项目。虽然我使用的方法有效，但感觉非常低效，因为我每次都在循环一组 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 之类的好用例吗？我还没有完全理解，还没有花时间使用它，所以如果是的话，我真的很想知道如何正确应用这种模式。

【问题讨论】：

你可以在选择器和方法中做更多的工作，而不是在循环和流程中。像（未经测试）$('.timer span').removeClass("active").slice(p).addClass("active")
很有趣，也会尝试这种方法。
是的，我意识到需要两个链，而不是一个，（不要切片跨度，切片 .timers）但概念是相同的。我认为你在循环中所做的一切都是在链中完成的。
即使你实现了一个主题-观察者模式，你仍然必须在每次有更新时循环通过观察者。我认为你所拥有的可能非常有效。从理论上讲，缓存 DOM 数组可以避免每次迭代都遍历 DOM，但浏览器似乎已经优化了 @$#! DOM 查询。见我的jsperf
@JamesM.Lay 想要添加它作为答案，以便我可以关闭这个问题？

标签： javascript jquery observer-pattern

【解决方案1】：

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

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

【讨论】：