Question

我正在学习Chrome扩展程序并尝试在实时聊天页面上替换内容。我能够做大部分的事情，唯一不适合我的工作或者更糟糕的是我的页面是我每天使用3秒后用来拍摄功能的setInterval选项。

我使用setInterval的原因是因为每次在聊天控制台中添加新的聊天消息时，它都会在表格中创建<td class=".profile-image">New Message</td>。我想为它添加一个类，所以我可以使用CSS改变它的外观，现在让CSS工作。

当页面加载了所有过去的消息时，加载所有消息需要2秒，直到那时没有class=".profile-image"的事情。我有一个setTimeout，所以该功能等待3秒后再拍摄。现在的问题是，这只会加载一次，当有新消息时，我将不得不再次运行相同的功能。现在为了让这个工作，noob我做了一个setInterval来运行这个函数增益，但问题是整个页面滞后。我想要实现的是让函数知道有一条新消息，它应该自动添加类。

感谢您的帮助！

var dostuff = function() {
  setTimeout(function() {
    jQuery(".profile-image img").each(function() {
      this.src = this.src.replace('small.jpg', 'large.jpg');
      this.src = this.src.replace('small.png', 'large.png');
      $(".profile-image img").attr("height", "64");
      $(".profile-image img").attr("width", "64");
      $(".profile-image img").attr("class", "pro_img");
    });
  }, 2000);
};

setInterval(dostuff, 3000);

Answer 1

观察页面的更改，或者将这些图像插入到页面中的任何脚本，都会更好。但是如果你需要坚持轮询页面，那么你可以做出的一些改进应该可以使这项工作合理地完成：

如果您要继续使用setInterval轮询该页面，则无需在其中进行setTimeout。它只是抵消了间隔。
DOM搜索是昂贵的部分。您正在重复搜索相同的项目批次。 jQuery(".profile-image img").each会引导您完成每一张图片。在该循环内，您再次搜索这些图像中的每一个，三次。您需要做的就是遍历图像并修改它们。
这很小，但你可以通过将这些css规则放在一个类而不是单独设置它们来减少操作。
如果有一个类名，您可以在修改它们时安全地从DOM元素中删除它，您可以使搜索在每次迭代时都不会捕获已经修改过的元素。
您可以越专门定位搜索，就越好。不是在.profile-image img搜索整个DOM正文，而是可以使用更接近的父元素来识别您必须挖掘的DOM（#foo .profile-image img）。（ID选择器很快，因为它们是唯一的，只能被查找。类选择器实际上必须搜索DOM。）

结果：

var dostuff = function() {
    $(".profile-image img").each(function() {
      this.src = this.src.replace('small.png', 'large.png');
      $(this).addClass('pro_img') // put the height and width rules inside the class CSS
             .removeClass('profile-image'); // if you're not depending on this CSS (or move what you need to preserve into .pro_img)
    });
};

setInterval(dostuff, 3000);

setInterval落后于我的页面

1 个答案: