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函数放在括号内来评估它，就像声明它一样；此语法是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()

Answer 2

为什么需要自调用功能？删除它，它应该可以工作。

<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, false);
</script>

之所以不起作用，是因为您在事件监听器分配无法访问的范围内声明了resizeElement。

调整窗口大小时如何触发功能？

2 个答案: