异步加载js的方式有哪些

涛哥 PHP代码

异步加载JavaScript的方式有以下几种:

  1. 回调函数

回调函数是最常见的异步加载方式之一。在请求JavaScript文件时,可以提供一个回调函数,该函数会在JavaScript文件加载完成后被调用。

例如,使用jQuery库的$.getScript()函数可以加载JavaScript文件,并在加载完成后执行回调函数。示例代码如下:

$.getScript('path/to/script.js', function() {
    // script.js已经加载完成
});
  1. Promise

Promise是ES6中引入的异步编程概念,它可以方便地处理异步任务的成功或失败,并返回一个Promise对象。

使用Promise对象加载JavaScript文件的示例代码如下:

function loadScript(src) {
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = src;

        script.onload = function() {
            resolve();
        };

        script.onerror = function() {
            reject(new Error('加载script.js失败'));
        };

        document.head.appendChild(script);
    });
}

// 调用loadScript函数加载JavaScript文件
loadScript('path/to/script.js')
    .then(function() {
        // script.js已经加载完成
    })
    .catch(function(error) {
        console.error(error);
    });
  1. async/await

async/await是ES8中引入的异步编程概念,它可以更加方便地处理异步任务的结果,并使异步代码的写法更加清晰。

使用async/await异步加载JavaScript文件的示例代码如下:

async function loadScript(src) {
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = src;

        script.onload = function() {
            resolve();
        };

        script.onerror = function() {
            reject(new Error('加载script.js失败'));
        };

        document.head.appendChild(script);
    });
}

// 调用loadScript函数加载JavaScript文件
async function load() {
    try {
        await loadScript('path/to/script.js');
        // script.js已经加载完成
    } catch (error) {
        console.error(error);
    }
}

load();

以上是常见的异步加载JavaScript文件的方式,根据实际情况选择合适的方式可以更好地提高程序的性能和用户体验。