Question

在我编写的模块内部（它是一种滑块/时间轴接口组件）我有一个更新控件的方法，这些控件是一组沿底部可更新的可点击elemet单击并在用户滚动时。

我正在执行以下操作，将类附加到直到活动项目。虽然我使用的方法有效，但由于我每次都在一组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元素数组？

1 个答案: