在纯 JavaScript 中只执行一次局部函数？

Question

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

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

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

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

Answer 1

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

(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
    }
})();

Answer 2

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

window.addEventListener('DOMContentLoaded', checkCSS)

在纯 JavaScript 中只执行一次局部函数？

Execute a local function only once in pure JavaScript?

javascript

function

local

execute