2010-07-21 4 views
1

J'ai une fonction "for" exécutée dans une fonction dragable jQuery. Y a-t-il une meilleure façon de faire cela du point de vue du temps d'exécution? Ma fonction est:jQuery/Javascript "pour" l'amélioration des performances de la fonction

$("#dragger").draggable({ 

      containment: '#timeline', 
      axis: 'x', 
      drag: function(event, ui) { 

      var divs = $("#timeline div.timeline"); 
      for (var i=0, il=divs.length; i<il; i++) { 
       var layer = '#layer'+i, 
       gow = layer+"Go"; 
       SelectClosestKeyframes(this, event, ui, $(layer), $(gow)); 
      } 
     }  
    }); 

Puis-je améliorer la for (var i=0, il=divs.length; i<il; i++) Thanx

Répondre

5

Il ne sert à rien d'essayer d'optimiser la mécanique de la boucle compte tenu de ce que vous faites dans la boucle. Premièrement, je doute que vous puissiez l'améliorer de toute façon de toute façon, et deuxièmement, parce que le coût de ce code de boucle est écrasé par le coût de tous ces appels jQuery.

Vous commencez par trouver un tas de <div> éléments. Vous parcourez ensuite cette liste, mais votre code n'utilise jamais le tableau "divs". Au lieu de cela, il effectue 2 autres recherches jQuery (bien que celles-ci soient assez bon marché, car elles sont basées sur l'identifiant de l'élément) par itération, plus tout travail effectué dans cette fonction.

Comment êtes-vous parvenu à la conclusion que la boucle nécessite une "optimisation"? La page est-elle lente? Si oui, alors je regarderais à l'intérieur de cette fonction "SetClosestKeyframes" et voir ce que fait . À moins qu'il y ait quelques millions d'éléments "div.timeline", votre problème n'est pas la boucle elle-même.

+0

+1, Excellente réponse, était sur le point de poster ceci. Il peut optimiser la boucle, http://blogs.sun.com/greimer/resource/loop-test.html mais comme vous l'avez dit, la boucle n'est pas le problème. – Anders

+0

Hmm, j'ai pensé qu'il vaut mieux déclarer: var layer = '# layer' + i, gow = layer + "Go"; alors var layer = '# layer' + i; var gow = couche + "Go" – Mircea

+0

@Mircea Oh !! Je n'ai pas remarqué la virgule! Vous avez raison, ça va. Je vais modifier ma réponse. – Pointy

2

http://www.websiteoptimization.com/speed/10/ est une bonne ressource que je l'ai utilisé avant pour l'optimisation des boucles javascript.

+0

Toutes ces techniques seraient un gaspillage complet d'effort ici. – Pointy

+1

Faites-vous un point de vue philosophique sur la futilité de l'action dans un monde sans but? Alors juste assez. Mais la question était "Puis-je améliorer ...", pas "Vais-je voir un avantage à améliorer ...". Donner du crédit à l'intervenant pour savoir pourquoi il pose la question. – Yellowfog

+0

Eh bien, peu importe pourquoi il pose la question. La boucle est déjà très bonne, en ce sens qu'il cache la longueur au début. Par rapport à tous les appels de fonction, les mécanismes de boucle ne vont pas causer de problème perçu. (En outre, ce site est sacrément vieux, donc je suis douteux que l'un de ses repères sont pertinents pour les systèmes d'exécution Javascript modernes.) – Pointy

0

Je chercherais à refactoriser la fonction SelectClosestKeyframes afin qu'elle soit liée à la classe div avec le scénario. Et/ou utilisez "chacun".

0

Non que ce serait plus vite, juste plus propre:

var dragable = this; 
$("#timeline div.timeline").each(function(i) { 
    SelectClosestKeyframes(dragable, event, ui, $('#layer'+i), $('#layer'+i+'Go')); 
}); 

En fait, le each() sera un peu plus lent que votre for() mais à une échelle très minute.

Questions connexes