Question

我有一个简单的问题。如果函数持有调整大小函数，为什么此函数返回两倍宽度仅第一个元素？

var $element1 = $( '.one' ),
    $element2 = $( '.two' );

function Width( element ) {
    $( window ).resize(function() {
        var width = element.width();
        console.log( width );
    });
    $( window ).resize();
}

Width( $element1 );
Width( $element2 );

我的代码有问题吗？

小提琴http://jsfiddle.net/eLLcZ/

没有调整大小函数http://jsfiddle.net/VbX8L/

Answer 1

在$( window ).resize();中使用Width()，每次都会调用所有window累积的resize处理程序：

Width( $element1 ); // the `window` has 1 `resize` handler, it's invoked
                    // log: 100

Width( $element2 ); // the `window` has 2 `resize` handlers, both are invoked
                    // calling the 1st handler a 2nd time (totaling 3 logs)
                    // log: 100
                    // log: 150

如果您有其他元素（例如$element3处的200px），此扩展会继续：

Width( $element3 ); // Adds a 3rd handler, invokes the 1st and 2nd again
                    // log: 100
                    // log: 150
                    // log: 200

要仅调用当前处理程序，至少在它被绑定到事件时，您希望直接调用它而不是每次都触发整个事件：

function Width( element ) {
    function onResize() {
        var width = element.width();
        console.log( width );
    }
    $( window ).resize(onResize); // add for later
    onResize();                   // call once now
}

Width( $element1 ); // log: 100
Width( $element2 ); // log: 150

您仍然可以稍后触发整个事件，以便立即运行所有处理程序：

$( window ).resize(); // log: 100
                      // log: 150

为什么这个函数返回结果的两倍？

1 个答案: