为什么我不应该在循环中创建函数？

Question

Jshint.com 建议以下代码：

Line 150: }, false );

Don't make functions within a loop.

但是，它让我不必多次编写 document.getElementById()，而是可以将 id 保存在一个数组中并循环遍历它们。

我觉得更简洁和可维护的代码。

function styleTwitter( pair_array )
{
    var i, input, label;
    for ( i = 0; i < pair_array.length; i+=2 ) 
    {
        input = document.getElementById( pair_array[ i ] );
        label = document.getElementById( pair_array[ i + 1 ] );

        input.addEventListener( "focus", function()
        { 
            if( input.value === '' )
            {
                label.style.opacity = 0; 
                input.style.border = '1px solid #888888'; 
            }
        }, false );

        input.addEventListener( "blur", function()
        {
            if( input.value === '' )
            {
                label.style.opacity = 1;
                new EffectsFont( label ).fade( 'up', 150 );
                input.style.border = '1px solid #dddddd'; 
            }

        }, false );
    }

Answer 1

您是否尝试过创建一个函数来分析事件源并执行相同的操作？它既更容易掌握（阅读：更易于维护），而且不会占用内存（闭包捕获整个堆栈，因此它绝不便宜）。

Answer 2

当您执行诸如 getElementById() 查找之类的 DOM 操作时，它们的开销很大并且会降低页面速度。当您以编程方式在循环中应用不透明度等样式更改时，这些更改也很昂贵，因为浏览器每次都必须重新绘制屏幕。

现在，如果您有一个应用这些更改的 CSS 类，您可以在一个操作中应用所有更改，并节省数百次浏览器重绘操作。这就是人们应该避免循环 UI 更新的主要原因。

但是，这取决于您正在执行多少个循环。如果它没有减慢速度并且这是您唯一的循环，请不要担心。对于更高性能的应用程序来说，它更受关注。

附：请记住，当向这样的元素添加事件侦听器时，如果稍后从 DOM 中删除该元素，您也将它们删除，您将遇到内存泄漏。