javascript - 触发元素/节点列表的更改太慢

Question

我想要重置的 div 内有很多复选框。他们所有人都有相同的变化事件。单击重置按钮时，将比较当前属性和 data-default，如果不同，则将属性设置为此值并触发更改事件。

Data-default 是页面加载时或通过 ajax 保存部分时设置的复选框的选中状态。

var $checkboxes = $section.find(":checkbox");

for (var i = 0; i < $checkboxes.length; i++) {
    var $cb = $($checkboxes[i]);

    var currentValue = $cb.prop("checked");
    var defaultValue = $cb.data("default");

    if (currentValue !== defaultValue) {
        $cb.prop("checked", defaultValue)
            .trigger("change");
    }
}

这里的问题是性能。使用 jquery 触发 70 个复选框的更改事件大约需要 1 秒。当有 1000 个复选框需要重置时，大约需要 5 分钟(如果浏览器不崩溃)。

有没有更好的方法来触发对象数组的 onchange 事件，也许使用普通的 javascript？

Answer 1

您的代码似乎没有太大问题。您的回调中可能存在性能瓶颈。你可以做一件事。如果您使用 Chrome，则可以使用 Chrome Profiler，它会准确地告诉您您的时间都花在哪里了。开发者工具中有一个性能选项卡，可以帮助您解决问题。