javascript - $ ("SELECTOR").css() 的复杂度

Question

我试图隐藏不在过滤用户列表中的用户。

为此，我正在使用这段代码

_.each(users, function (user) {
    var display_type = filtered_users.hasOwnProperty(user.email)? "block" : "none";
    $("label[for='" + user.email + "']").css({"display":display_type});
});

users 是所有用户对象的列表，filtered_users 是过滤用户的电子邮件列表。我有大约 1000 个或更多用户可以过滤。似乎 $("label[for='"+ user.email + "']").css({"display":display_type}) 操作花费了太多时间。

HTML:

<label class="checkbox" for="user1@gmail.com">
    <input type="checkbox" name="user" value="user1@gmail.com"> Cordelia Lear (cordelia@zulip.com)
</label>
<label class="checkbox" for="user2@gmail.com">
    <input type="checkbox" name="user" value="user2@gmail.com"> Cordelia Lear (cordelia@zulip.com)
</label>

谁能解释一下 $("label[for='"+ user.email + "']").css({"display":display_type}) 的复杂性？有什么可能的方法来即兴创作吗？

Answer 1

这 $("label[for='"+ user.email + "']") 是让你慢下来的部分。对于每个用户，jquery 的 sizzle 引擎必须遍历页面中的所有标签，并选择确切的标签，因此迭代用户至少为 o(n) * o(n) - o(n2)。

要解决这个问题，您可以一次通过电子邮件创建一个标签映射(与您为 filtered_users 所做的相同)，然后使用 o(1)，找到元素并更改显示:

var usersMap = $('.users')
  .find('label')
  .toArray()
  .reduce(function(map, user) {
    var $user = $(user);
    var email = $user.attr('for');
    map[email] = $user;
    return map;
  }, {});

var users = [
         { email: 'user1@gmail.com' }, 
         { email: 'user2@gmail.com'}
        ];

var filtered_users = { 'user1@gmail.com': true };

users.forEach(function(user) {
  var display_type = filtered_users.hasOwnProperty(user.email) ? "block" : "none";
  usersMap[user.email].css({
    "display": display_type
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="users">
  <label class="checkbox" for="user1@gmail.com">
    <input type="checkbox" name="user" value="user1@gmail.com">Cordelia Lear (cordelia@zulip.com)
  </label>
  <label class="checkbox" for="user2@gmail.com">
    <input type="checkbox" name="user" value="user2@gmail.com">Cordelia Lear (cordelia@zulip.com)
  </label>
</div>