javascript（jquery）脚本性能同步与异步

我有一个javascript函数，可以根据输入文本的变化过滤dom元素，因此：

$(".input").keyup(function(e) {
    filter();
});

var cache = $(".dom");

var filter = function() {
     cache.each(function() {
         // if field contains some text show else hide
     }
};

我的问题发生在有许多dom元素要过滤时，由于同步处理（如上面的示例），整个页面变得不可访问。我试图想出一个解决方案，不锁定整个页面的同步处理

---

问题与过滤逻辑无关（它完全无关紧要），与jquery或javascript本身无关，与同步处理和dom元素的数量有关。

因为javascript是单线程的，唯一真正解决这个问题的方法是将长时间运行的作业拆分为一系列较短的作业，并使用setTimeout（）在每个部分末尾使用较短的时间延迟来启动下一个作业。这为您的UI和其他JavaScript事件提供了一个更新的机会。

由于JavaScript是单线程的，所以解决这一问题的唯一真正方法是将长时间运行的作业拆分为一系列较短的作业，并在每个部分的末尾使用setTimeout（）和一个较短的时间延迟来启动下一个作业。这为您的UI和其他JavaScript事件提供了一个更新的机会。

您可以通过将大量dom节点放入队列并在每个setTimeout“tick”上只处理几个元素来更新它们。在伪代码中：

on(event):
   queue = DOM nodes to be updated
   setTimeout(update)

update:
    queue.slice(0, limit).each(...update a node...)
    queue = queue.slice(limit) // remove processed nodes
    if (queue.length > 0) setTimeout(update) // repeat...

有关完整的工作示例，请参见

---

Upd：第一个版本的Chrome出现了问题（与它的“display”bug有关），按照添加了一个修复程序似乎已经解决了这个问题。

您可以通过将大量dom节点放入队列来更新它们，并且在每个setTimeout“tick”上只处理几个元素。在伪代码中：

on(event):
   queue = DOM nodes to be updated
   setTimeout(update)

update:
    queue.slice(0, limit).each(...update a node...)
    queue = queue.slice(limit) // remove processed nodes
    if (queue.length > 0) setTimeout(update) // repeat...

有关完整的工作示例，请参见

---

Upd：第一个版本的Chrome出现了问题（与它的“display”bug有关），按照添加了一个补丁似乎已经解决了这个问题。

或者在其他地方通过ajax请求进行修复，如果真的太长了？ 还有，也许是这样的：第一步，选择要隐藏在数组中的所有ID，然后，设置超时，然后在第二步，像50/50那样隐藏它们？

---

另外，也许处理过程中，将所有这些元素的容器隐藏起来，然后，一旦完成，重新显示它可能会更快

或者通过ajax请求在其他地方执行，如果请求太长？ 还有，也许是这样的：第一步，选择要隐藏在数组中的所有ID，然后，设置超时，然后在第二步，像50/50那样隐藏它们？

---

另外，也许处理过程中，将所有这些元素的容器隐藏起来，然后，一旦完成，重新显示它可能会更快

出于这种目的，我通常更喜欢Ben Alman的消息队列库。它也有不同的选择。这是一个非常成功的节流

下面是一个节流样品

---

出于这种目的，我通常更喜欢Ben Alman的消息队列库。它也有不同的选择。这是一个非常成功的节流

下面是一个节流样品

---

谢谢大家的帮助。我根据Ben Clayton的回答提出了一个解决方案，但我仍在寻找想法并研究thg435解决方案。如有任何意见，将不胜感激

    <script type="text/javascript">

        $(document).ready(function () {

            var cache = $(".whatever");
            var wait = 0;
            var input = $("#input");
            var regex = null;

            input.keyup(function (e) {
                go.index = 0;
                clearTimeout(wait);
                wait = setTimeout(go.start, 500);
            });

            var filter = function (i) {
                var one = cache.eq(i - 1);
                one.text().match(regex) ? one.show() : one.hide();
                go.index++;
                setTimeout(go.filter, 10);
            };

            go = {
                index: 0,
                filter: function () {
                    go.index == 0 || go.index > cache.length ? null : filter(go.index);
                },
                start: function () {

                    go.index = 1;

                    var search = input.val();
                    search = search.replace(new RegExp("[a]", "gi"), "[aàáâã]");
                    search = search.replace(new RegExp("[e]", "gi"), "[eéê]");
                    search = search.replace(new RegExp("[i]", "gi"), "[ií]");
                    search = search.replace(new RegExp("[o]", "gi"), "[oóô]");
                    search = search.replace(new RegExp("[u]", "gi"), "[uú]");
                    search = search.replace(new RegExp("[c]", "gi"), "[cç]");
                    regex = new RegExp(search, "gi");

                    go.filter();

                }
            }

        });

    </script>

    <input type="text" id="input" />

    <span class="whatever">lalala</span>
    <span class="whatever">leléLÉ</span>
    <span class="whatever">lololo</span>
    <span class="whatever">lululu</span>

$（文档）.ready（函数（）{
变量缓存=$（“.whatever”）；
var-wait=0；
var输入=$（“#输入”）；
var regex=null；
输入键控（功能（e）{
go.index=0；
清除超时（等待）；
等待=设置超时（go.start，500）；
});
变量过滤器=函数（i）{
var one=cache.eq（i-1）；
一个.text（）.match（regex）？一个.show（）：一个.hide（）；
go.index++；
设置超时（go.filter，10）；
};
go={
索引：0，
过滤器：函数（）{
go.index==0 | | go.index>cache.length？null：过滤器（go.index）；
},
开始：函数（）{
go.index=1；
var search=input.val（）；
search=search.replace（新的RegExp（“[a]”，gi”），“[aá–ã]”；
search=search.replace（新的RegExp（“[e]”，“[gi”），“[eê]”）；
search=search.replace（新的RegExp（“[i]”，“[gi”），“[ií]”）；
search=search.replace（新的RegExp（“[o]”，“[gi”），“[oóô]”）；
search=search.replace（新的RegExp（“[u]”，gi”），“[uú]”；
search=search.replace（新的RegExp（“[c]”，“[gi”），“[cç]”）；
regex=newregexp（搜索，“gi”）；
go.filter（）；
}
}
});
拉拉
勒勒埃勒
洛洛洛
卢卢卢
谢谢大家的帮助。我根据Ben Clayton的回答提出了一个解决方案，但我仍在寻找想法并研究thg435解决方案。如有任何意见，将不胜感激

    <script type="text/javascript">

        $(document).ready(function () {

            var cache = $(".whatever");
            var wait = 0;
            var input = $("#input");
            var regex = null;

            input.keyup(function (e) {
                go.index = 0;
                clearTimeout(wait);
                wait = setTimeout(go.start, 500);
            });

            var filter = function (i) {
                var one = cache.eq(i - 1);
                one.text().match(regex) ? one.show() : one.hide();
                go.index++;
                setTimeout(go.filter, 10);
            };

            go = {
                index: 0,
                filter: function () {
                    go.index == 0 || go.index > cache.length ? null : filter(go.index);
                },
                start: function () {

                    go.index = 1;

                    var search = input.val();
                    search = search.replace(new RegExp("[a]", "gi"), "[aàáâã]");
                    search = search.replace(new RegExp("[e]", "gi"), "[eéê]");
                    search = search.replace(new RegExp("[i]", "gi"), "[ií]");
                    search = search.replace(new RegExp("[o]", "gi"), "[oóô]");
                    search = search.replace(new RegExp("[u]", "gi"), "[uú]");
                    search = search.replace(new RegExp("[c]", "gi"), "[cç]");
                    regex = new RegExp(search, "gi");

                    go.filter();

                }
            }

        });

    </script>

    <input type="text" id="input" />

    <span class="whatever">lalala</span>
    <span class="whatever">leléLÉ</span>
    <span class="whatever">lololo</span>
    <span class="whatever">lululu</span>


$（文档）.ready（函数（）{
变量缓存=$（“.whatever”）；
var-wait=0；
var输入=$（“#输入”）；
var regex=null；
输入键控（功能（e）{
go.index=0；
清除超时（等待）；
等待=设置超时（go.start，500）；
});
变量过滤器=函数（i）{
var one=cache.eq（i-1）；
一个.text（）.match（regex）？一个.show（）：一个.hide（）；
go.index++；
设置超时（go.filter，10）；
};
go={
索引：0，
过滤器：函数（）{
go.index==0 | | go.index>cache.length？null：过滤器（go.index）；
},
开始：函数（）{
go.index=1；
var search=input.val（）；