js 实现 defer

在 JavaScript 中，defer 是一个用于 <script> 标签的属性，用于延迟脚本的执行，直到文档解析完成。以下是如何在 JavaScript 中模拟或实现类似 defer 功能的方法：

使用 DOMContentLoaded 事件

通过监听 DOMContentLoaded 事件，可以确保脚本在文档解析完成后执行。这种方法模拟了 defer 的行为。

document.addEventListener('DOMContentLoaded', function() {
    // 在这里编写需要延迟执行的代码
    console.log('文档解析完成，脚本执行');
});

动态创建 <script> 标签并设置 defer

可以通过 JavaScript 动态创建 <script> 标签，并设置其 defer 属性为 true。

const script = document.createElement('script');
script.src = 'your-script.js';
script.defer = true;
document.head.appendChild(script);

使用 async 和 defer 的组合

如果需要在脚本加载完成后立即执行，可以使用 async 和 defer 的组合。async 确保脚本异步加载，而 defer 确保脚本在文档解析完成后执行。

const script = document.createElement('script');
script.src = 'your-script.js';
script.async = true;
script.defer = true;
document.head.appendChild(script);

使用 setTimeout 模拟延迟

如果需要手动控制脚本的执行时间，可以使用 setTimeout 来模拟延迟执行。

setTimeout(function() {
    // 延迟执行的代码
    console.log('延迟执行的脚本');
}, 0);

使用 Promise 和 async/await

通过 Promise 和 async/await，可以更灵活地控制脚本的执行时机。

function deferScript() {
    return new Promise(resolve => {
        window.addEventListener('load', resolve);
    });
}

async function runScript() {
    await deferScript();
    console.log('文档和资源加载完成，脚本执行');
}

runScript();

注意事项

• defer 属性仅适用于外部脚本（通过 src 引入的脚本）。
• 动态创建的脚本默认是异步的，除非显式设置 async 或 defer。
• 使用 DOMContentLoaded 或 load 事件时，确保脚本在文档头部或尽早加载，以避免事件已经触发。

以上方法可以根据具体需求选择，以实现类似 defer 的功能。