当前位置：首页 > JavaScript

js实现defer

2026-04-07 02:25:44JavaScript

defer 的实现原理

在 JavaScript 中，defer 通常指延迟执行某些操作，比如延迟加载脚本或延迟执行函数。原生的 HTML <script> 标签支持 defer 属性，但有时需要在纯 JavaScript 中实现类似功能。

使用 setTimeout 实现延迟执行

通过 setTimeout 可以简单实现函数的延迟执行。以下是一个基本示例：

function deferredFunction() {
    console.log('This function is deferred.');
}

setTimeout(deferredFunction, 1000); // 延迟 1 秒执行

封装通用的 defer 函数

可以封装一个通用的 defer 函数，接受回调函数和延迟时间作为参数：

function defer(callback, delay = 0) {
    setTimeout(callback, delay);
}

// 使用示例
defer(() => {
    console.log('Deferred execution after 1 second.');
}, 1000);

结合 Promise 实现异步 defer

如果需要更现代的异步控制，可以结合 Promise 和 setTimeout：

function defer(delay = 0) {
    return new Promise(resolve => {
        setTimeout(resolve, delay);
    });
}

// 使用示例
defer(1000).then(() => {
    console.log('Deferred execution after 1 second.');
});

模拟脚本的 defer 属性

如果需要模拟 <script defer> 的行为（即延迟加载但不阻塞 DOM 解析），可以动态创建 <script> 标签并设置 defer 属性：

function loadScriptDeferred(src) {
    const script = document.createElement('script');
    script.src = src;
    script.defer = true;
    document.head.appendChild(script);
}

// 使用示例
loadScriptDeferred('path/to/script.js');

使用 requestAnimationFrame 实现帧级延迟

对于需要与浏览器渲染帧同步的延迟操作，可以使用 requestAnimationFrame：

js实现defer

function deferFrame(callback) {
    requestAnimationFrame(callback);
}

// 使用示例
deferFrame(() => {
    console.log('Deferred until next animation frame.');
});