纯JavaScript如何实现局部函数仅执行一次，避免重复触发操作？

• 现有逻辑需立即检查指定元素的max-width CSS属性，若属性值为1000px则执行对应操作
• 为避免CSS未加载完成导致校验失效，需在window的load事件触发后执行二次校验
• 对应操作仅能执行一次：若首次立即校验已满足条件执行了操作，load事件触发的二次校验不再重复执行
• 不可使用全局变量或全局函数，所有变量和方法均需封闭在局部作用域内

利用IIFE（立即执行函数）的天然局部作用域，声明一个私有标记变量记录操作的执行状态，每次触发校验时先判断标记，操作执行后更新标记状态即可，不会产生全局变量污染，完全符合实现要求。

(function() {
    // 局部作用域内的执行标记，不会泄漏到全局环境
    let hasExecuted = false;
    // 请替换为实际需要检测的目标元素
    const targetElement = document.querySelector('#your-element-selector');

    function checkCSS() {
        // 已执行过操作直接终止后续逻辑
        if (hasExecuted) return;
        if (window.getComputedStyle(targetElement).getPropertyValue('max-width') === '1000px') {
            // 此处写入你需要执行的对应操作逻辑
            console.log('目标操作执行');
            // 标记为已执行，后续所有校验调用都不会再触发操作
            hasExecuted = true;
        }
    }

    // 首次立即校验
    checkCSS();
    // 页面加载完成后二次校验
    window.addEventListener('load', function() {
        checkCSS();
    });
})();

• 标记变量hasExecuted仅在当前IIFE的局部作用域内可访问，不属于全局变量，满足实现约束
• 若首次校验满足条件执行操作后，标记会被设置为true，后续load事件触发的二次校验会直接返回，不会重复执行操作
• 若首次校验因CSS未加载完成未满足条件，二次校验时仍会正常判断，满足条件即可执行操作

内容的提问来源于stack exchange，提问作者EricBln