2011-10-15 26 views
0

我有一个名为targets的对象数组,我想对这些对象中的每一个执行一个函数。第一种方法:速度测试:while()循环与jQuery的each()函数

targets.each(function() { 
    if (needScrollbars($(this))) { 
     wrap($(this), id); 
     id = id + 1; 
    } 
}); 

该方法的执行速度为〜125ms。第二种方法是:

var i=0; 
while (targets[i] != undefined) { 
    if (needScrollbars($(this))) { 
     wrap($(this), id); 
     id = id + 1; 
    } 
    i = i+1; 
} 

这第二种方法需要高达1385ms执行,我得到我的头。有没有人知道为什么一个简单的骨骼循环运行速度慢于我只能猜测这只是一个简单的循环而已(只是猜测)的函数呢?

谢谢。

+2

请创建一个http://jsperf.com/test。 –

+2

1)错误'this'值得到'window',2)使用'!='而不是'!=='导致类型强制并降低性能 – Zirak

+0

我做了一些更正并试图做出jsperf.com测试,但我有一些奇怪的错误。菲利克斯克林,你可以看看吗? http://jsperf.com/while-cycle-vs-each –

回答

2

它们完全不同。第一个示例中的this是当前的target,在第二个示例中this是“外部”this。您应该更改第二个例子是:

var i=0; 
while (targets[i] != undefined) { 
    var cur = $(targets[i]); 
    if (needScrollbars(cur)) { 
     wrap(cur, id); 
     id = id + 1; 
    } 
    i = i+1; 
} 

相关quote

更重要的是,这个回调是在当前DOM元素的情况下解雇,所以关键字this指的元素。

但我不知道为什么你还没有写成:

for (var i = 0; i < targets.length; i++) 
{ 
    var cur = $(targets[i]); 
    if (needScrollbars(cur)) { 
     wrap(cur, id); 
     id = id + 1; 
    } 
} 

而在最后的each“方法”是容易理解(对我来说)。

+0

哇,我完全忽略了这一点。我会纠正它并再次测试。 –

2

您的第二种方法在功能上与第一种方法不相同。

为什么?因为它使用this,因此它在全球范围内成为closure。当然,第二种方法会更慢一些:它不断弹出由全局作用域构成的jQuery对象。再次尝试使用该基准:

var i=0; 
while (targets[i] !== undefined) { 
    var o = $(targets[i]); 
    if (needScrollbars(o)) { 
     wrap(o, id); 
     id++; 
    } 
    i++; 
} 
+0

只运行一次jQuery初始化器对于第一个片段也是一个好主意。 – pimvdb