0

我正在使用遍历搜索结果列表的javascript循环（使用），通过添加围绕搜索命中setInterval的css来突出显示搜索词。<span>我setInterval这样做是为了释放对浏览器的控制。

在 Chrome 和 Firefox 中这很有效——即使 setInterval 参数为 10-20ms；并且用户可以完全控制浏览器（即滚动、点击链接等），同时快速突出显示结果：

mylooper = setInterval(function() {
    // my functionality is here
},15); // 15ms

不幸的是，当使用可怕的 IE8 时，浏览器会被锁定并且需要很长时间才能添加<span>'s 和设置搜索结果的样式。首先加载页面也需要很长时间 - 删除此脚本后大大缩短了时间。

到目前为止，我已经尝试过：

  • 更改间隔值（我读过 IE8 没有检测到低于 15 毫秒的间隔）；
  • 使用setTimeout而不是 setInterval；
  • 删除间隔以检查这实际上是导致减速的原因（它是！）；和

  • 咒骂 Internet Explorer 很多；

    var highlightLoop;
var index = 0;

highlightLoop = setInterval(function () {

var regex = RegExp(regexPhrase, "gi"); // regexPhase created elsewhere
var searchResults = resultElements.eq(index).get(0); // run through resultElements which contain alll the nodes with search results in them.

  findAndReplaceDOMText( // a function that does the searching and inserting of styling
    regex,
    searchResults,
    function (fill, matchIndex) {
      called = true;
      var span = document.createElement("span");
      span.className = "result-highlight";
      span.innerHTML = fill;
      return span;
    }
  );
  if (index == resultElements.length || searchTermUpdated == true) { // stop interval loop when search term changes or we reach the end of results - variable set elsewhere.
    searchTermUpdated = false;
    clearInterval(highlightLoop); // stop the loop
  }
  index++
}
}, 50); // 50ms does not improve performance.

任何关于 IE 中这种 javascripting 的变通方法的建议都将不胜感激。谢谢大家。

4

2 回答 2

0

我相信你可以通过调整来提高性能findAndReplaceDOMText，也许它的回调也可以。我想findAndReplaceDOMText从所有匹配的循环中将回调返回的元素附加到 DOM。如果它在循环内执行此操作，请尝试将其移到循环外，并立即将所有更改应用到 DOM。这应该会带来更好的性能，因为在每次 DOM 更新后重新绘制页面是昂贵的。

于 2013-01-11T16:38:53.013 回答
0

试试这种递归方法：

  • 获取要在数组 X 中操作的所有元素的列表（一次成本）
  • 当数组 X 有长度时，继续重复下一个动作
    • 将第一个元素移出数组
    • 处理单个元素
    • 在 a 上使用新数组 X（现在 X n - 1 长度）再次开始此过程setTimeout

代码一般看起来像这样

function processArray(array) {
  var element = array.shift();
  processElement(element);
  if (array)
    setTimeout(function(){processArray(array);},15ms);
}

这个递归可能还有其他事情要做，但它在所有浏览器中都工作得相当好并且从不阻塞，因为你只是在最后一个有时间完成时才开始重复。

于 2013-01-11T16:42:52.780 回答