Question

我有一个函数，它使用jquery .each（）选择器通过获取具有特定类的每个span的id来填充表，然后将该id传递给Ajax函数。

function populate(){
                  $('#thelist span').each(function()
                    {
                        let id = this.id;
                        let url = `importer.php?id=${id}`;
                         $.ajax(
                          {
                            url: url,
                            success: function(result)
                              { 
                                $("#"+id).html(result);
                              }
                          });
                    })
              };

我的问题是如何提高性能。我知道.each（）导致了延迟。有没有更好的方法来写这个？

Answer 1

部分解决方案是不使用jQuery。本机循环（for和while）具有令人难以置信的高性能，即使本机forEach提供更好的性能。但这不是这里的全部故事，你在每个循环上执行请求，这在架构上是一个坏主意。这就是问题的症结所在。

我会做什么并建议循环使用您的元素，将ID存储在队列中（数组会这样做）然后在完成此操作后，将ID序列化为序列号。 s并将它们一次性发送到服务器。

function populate() {
    let ids = [];

    $('#thelist span').each(function() {
        let id = this.id;
        ids.push(id);
    });

    $.ajax({
        type: "POST",
        url: "importer.php",
        dataType: "json",
        data: JSON.stringify({ ids: ids }),
        success: function(result) {
            $("#" + result.id).html(result.value);
        }
    });
};

我在这里提出的建筑改变。您的进口商应接受我们发送的ID的JSON。然后结果应该返回一个具有id和value属性的JSON对象。与DIV匹配的id媒体资源和包含您的HTML的value。

我也认为你可以从切换到native for循环而不是使用jQuery的每个迭代器中受益。你遇到的问题不是jQuery的每种方法的结果，但我会考虑远离它。

Answer 2

每个循环都不会导致延迟，但是ajax调用会这样做，因为它是一个等待服务器响应的异步调用。您无法避免从服务器加载的内容的延迟。您可以在加载数据时显示加载器动画或隐藏内容。

Answer 3

如果不能正确控制，使用如此多的异步请求会导致延迟甚至头痛，尽可能使用这样的例子来避免使用它们，因为它们不必按照与它们相同的顺序返回。 / p>

也许您应该考虑而不是迭代ajax函数，迭代ajax响应，并更改服务器返回数据的方式;而是返回一个特定的id，返回所有这些id，并检查它是否包含在表中以显示它。像这样：

function popuplate(){
  let url = 'importer.php';
  $.ajax({
    url: url,
    success: function(result){ 
      $.each(result,function(i,r){
        $("#"+r.id).html(r.result);
      });
    }
  });
}

Answer 4

这是我尝试将 .each（）转换为 for循环：

function populate(){
                  var myID = $('#thelist span'); //collect all spans as array
                  for (var i = 0, len = myID.length; i < len; i++) //for loop
                    {
                        let myid = myID[i].id; //span at count i in array as number
                        let url = `importer.php?id=${myid}`;
                         $.ajax(
                          {
                            url: url,
                            success: function(result)
                              { 
                                $('#'+myid).html(result);
                              }
                          });
                    })
              };

我确实获得了显着的性能提升。

jquery增加每个函数选择器的性能

4 个答案: