javascript - 我怎样才能让这个函数更高效，包含3个循环？

Question

我创建了这个函数，它循环遍历甘特图中代表任务的一堆元素。每个任务都有“link”类以及“id”和“pre”属性。

“pre”代表任务的前置任务。

该函数用于计算每个任务的前置任务是什么，然后调用另一个函数在它们之间绘制一个箭头。

我能想到的唯一方法是首先创建一个任务数组，然后循环该数组并获取每个任务的前置任务，再次循环该任务数组并找到 id 与前置任务匹配的任务然后调用绘图函数，如下所示。

但这导致了三个循环，一个循环在另一个循环内，如下所示，我不禁想到会有一种更有效的方法来做同样的事情吗？我的应用程序本来就很慢，这只会让情况变得更糟。

有人可以建议一种重写此函数以提高效率的方法吗？

P.S 该应用程序太大，无法为此执行 jsfiddle，并且代码相当不言自明。

 //Adds relationship link arrows between tasks
function add_arrows()
{
    var ttask = new Array();
    var pre = 0;

    //loop through all task elements with the class link and add them to an array
    $(".link").each(function(i) 
    {
        ttask[i] = $(this);
    });

    //loop through the array if tasks
    for (var i=0, l=ttask.length; i < l; i++ ) 
    {
        //if its not the first task get its predecessor value
        if(i != 0)
        {
            pre = ttask[i].attr('pre');
        }
        //loop through the array of tasks again and get the task with an id that matches the predecessor value
        for (var j=0, k=ttask.length; j < k; j++ ) 
        {
            if(ttask[j].attr('id') == pre)
            {
                var predecessor = ttask[j];
            }
        }
        //if its not the first task, draw a link between the predecessor and current task
        if(i != 0)
        {
            drawlink(predecessor, ttask[i], ttask[i].attr('link')); //function takes: predecessor, current task, link type
        }
    }
}

根据下面的建议，这看起来是迄今为止最有效的吗？除非有人能说出为什么另一种方法在计算上更好？

function add_arrows(){
   $(".link").each(function(i) {
      var $el = $(this);
      if(i) drawlink($('#' + $el.attr('pre')), $el, $el.attr('link'));
   });
 }

Answer 1

当然，它只是找到所有具有前任的元素(根据您的代码判断，具有 pre 属性)，并添加一个指向由其 link< 指示的元素的链接 属性。

类似于:

 $('[pre]').each(function(i,el){
        var self = $(el),
        link = self.attr('link'),
        predecessor = $('#' + link);
        if (predecessor.length)
        {
            //i.e. A predecessor has been found, assuming that #0 is not an element
            drawlink(predecessor, self , link );
         }
    });