javascript(jquery）脚本的性能是同步的还是异步的

javascript (jquery) script perfomance synchronous vs asynchronous

本文关键字：同步 异步 性能 javascript jquery 脚本      更新时间：2023-09-26

我有一个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 itslef无关，与同步处理和dom元素的数量有关

由于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...

请参阅http://jsfiddle.net/Etsmm/2/以获得完整的工作示例。

更新：第一个版本的Chrome出现了问题（与"显示"错误有关），根据这个答案添加修复程序似乎已经成功了。

或者在其他地方通过ajax请求进行操作（如果真的太长的话）？也许，还有某种：第一步，选择要隐藏在数组中的所有ID，然后，设置时间，然后在第二步，像50/50一样隐藏它们？此外，也许处理将所有这些元素的容器隐藏起来，然后一旦完成，重新格式化可能会更快？

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

https://github.com/cowboy/jquery-message-queuing/

下面是节流样品

http://benalman.com/code/projects/jquery-message-queuing/examples/throttling/

感谢大家的帮助。我根据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>
相关文章：