在纯 JavaScript 中只执行一次本地函数？答案

【问题标题】：Execute a local function only once in pure JavaScript?在纯 JavaScript 中只执行一次本地函数？
【发布时间】：2021-08-24 08:20:58
【问题描述】：

这看起来很简单，但我还没有找到合适的解决方案。

JS 的作用：立即检查元素的 CSS 样式，如果 max-width 为 1000px，则执行一些操作（参见 JS 注释）。如果在应用 CSS 之前执行了 JS，请在文档完成加载后再次检查。但是“做某事”应该只发生一次，所以如果它是立即完成的，不要通过事件监听器再做一次。

但是如何避免呢？使用全局变量或函数会很容易，但我想保留它们。

(function()
{
    function checkCSS()
    {
        if (window.getComputedStyle(element).getPropertyValue('max-width') == '1000px')
        {
            // do something, but only once!
        }
    }
    checkCSS();
    window.addEventListener('load', function() {checkCSS();});
})();

【问题讨论】：

我想知道你想要实现什么// do something, but only once!
也许你根本不需要那个功能
这行window.getComputedStyle(element) 看起来不太好。 window.addEventListener('load', 旁边不需要在 IIFE 中
@brk - 我不认为你的意思是那里的 IIFE（它不是立即调用的）。你完全明白函数包装是不必要的。

标签： javascript function local execute

【解决方案1】：

您可以在完成“某事”后移除处理程序，请参阅 cmets：

(function() {
    function checkCSS() {
        if (window.getComputedStyle(element).getPropertyValue("max-width") === "1000px") {
            // do something, but only once!
            // *** Remove the listener
            window.removeEventListener("load", checkCSS);
        }
    }

    // *** Add the listener
    window.addEventListener("load", checkCSS); // <== Note using the function directly
    // *** Do the initial check
    checkCSS();
})();

或者只有在你没有做“某事”时才添加它：

(function() {
    function checkCSS() {
        if (window.getComputedStyle(element).getPropertyValue("max-width") === "1000px") {
            // do something, but only once!
            // *** We did it (you could remove the listener here, but it doesn't really matter)
            return true;
        } else {
            // *** Didn't do it
            return false;
        }
    }

    // *** Do the initial check
    if (!checkCSS()) {
        // *** Didn't do it, add the listener
        window.addEventListener("load", checkCSS); // <== Note using the function directly
    }
})();

【讨论】：

太棒了，尤其是你的第二个建议（只有在你没有做“某事”的情况下才添加它）非常适合我的目的，现在效果很好。谢谢！

【解决方案2】：

要在“应用 CSS”之前触发它，您可以使用不同的事件，例如，DOMContentLoaded

window.addEventListener('DOMContentLoaded', checkCSS)

【讨论】：