javascript - 调整窗口大小时如何触发函数？

Question

当手动调整窗口大小时，我尝试调整 somediv 的大小。

<script>

(function resizeElement() {
    let height = window.innerHeight - 90;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div>" + $( window ).width() + " , " \
        + $( window ).height() + "</div>" );
})();

// Listen for resize changes
window.addEventListener("resize", resizeElement);

</script>

调整屏幕大小时，此功能不适用。以下内容有效，但迫使我声明该函数两次。

<script>

(function resizeElement() {
    let height = window.innerHeight - 90;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div>" + $( window ).width() + " , " \
        + $( window ).height() + "</div>" );
})();

// Listen for resize changes
window.addEventListener("resize", function() {
  let height = window.innerHeight-90;
  somediv.style.height = height+'px';
  $( "#target" ).html( "<div>" + $( window ).width() + " , " + $( window ).height() + "</div>" );
}, false);

</script>

知道如何避免双重声明吗？

编辑:如果我想让 90 成为一个名为 somevar 的变量，它将如何工作。我该如何通过这个？

编辑已解决:

<script>

let padding_text = 90;

function resizeElement(padding_text) {
    let height = window.innerHeight - padding_text;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div><i>w:" + $( window ).width() + " h:" + $( window ).height() + "</i></div>" );
};

// Listen for resize changes
window.addEventListener("resize", function() {
    resizeElement(padding_text);
}, false);

// Lets invoke it for the first time when the page loads
resizeElement(padding_text);

</script>

Answer 1

您正在评估 resizeElement 函数，就像声明它一样，将其放在括号内；此语法是 An IIFE (立即调用函数表达式)。 IIFE 是一个 JavaScript 函数，一旦定义就会运行。分组运算符 () 内包含的作用域可防止访问 IIFE 惯用语中的变量以及污染全局作用域。

此语法使得 resizeElement 函数名称对于括号之外的范围不可用。删除该函数的立即计算，稍后添加一个函数调用。

function resizeElement() {
    let height = window.innerHeight - 90;
    somediv.style.height = height + 'px';
    $( "#target" ).html( "<div>" + $( window ).width() + " , " \
        + $( window ).height() + "</div>" );
}

// Listen for resize changes
window.addEventListener("resize", resizeElement);

// Lets invoke it for the first time when the page loads
resizeElement()