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

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

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

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

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

我的代码有问题吗

拨弄

使用

$（window.resize（））在不使用resize函数的情况下进行拨弄Width（）

中的code>每次将调用所有

窗口的累积
调整大小
处理程序：

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

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

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


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

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

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

$（窗口）.resize（）触发事件的所有处理程序。不仅仅是为单个
元素添加的。是的，而是单独添加的。它将返回$element1和$element2的宽度。但当我在resize函数中执行此操作时，它将返回$element1宽度的两倍和$element2宽度的一倍。由于事件绑定到
窗口
，因此它们实际上并不分开。每次调用
Width（）
只会添加一个处理程序，但随后会触发
窗口迄今为止累积的所有
调整大小
处理程序。所以，
Width（$element2）
会再次触发
$element1
的事件以及它自己的事件。因此，基本上，如果稍后我会再次触发另一个$（窗口）。resize（）；什么都不行？