자바스크립트 파일을 동적으로 로드할 때 순차적으로 실행되게 하는 방법 (코드는 다음과 같습니다)

본 글의 내용은 자바스크립트 파일을 동적으로 로드할 때 순차적으로 실행시키는 방법에 대한 내용입니다.(코드는 아래와 같습니다.) 필요한 친구들이 참고하시면 도움이 되실 것 같습니다.

전에 js 코드를 작성할 때 코드를 통해 html에 특정 수의 js 파일을 동적으로 삽입하고 싶었습니다. 파일의 종속성을 순서대로 정렬했습니다.

var jsFiles = ['somepath/a.js','somepath/b.js',...];
var head = document.head;
jsFiles.forEach((file) => {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = file;
    head.appendChild(script);
});

그러나 코드를 실행하는 동안 동일한 오류가 매우 자주 보고되는데, 이는 아마도 실행 중에 b.js가 참조하는 a.js의 메서드가 존재하지 않는다는 의미일 것입니다. 오류율은 매우 높지만 100% 오류가 없는 것은 아닙니다.

분석 결과, 그 이유는 다음과 같을 것으로 생각됩니다. 해당 js 파일을 배열에 정의된 순서대로 로드하기 위해 동적으로 스크립트 태그를 생성하지만, 파일 크기와 네트워크 및 기타 요인으로 인해 해당 js 파일을 로드하는 순서는 다음과 같습니다. 이제 완료된 각 파일은 요청 순서와 정확히 일치하지 않습니다. 예를 들어 위의 예에서 a.js 파일이 b.js보다 크고 다운로드 속도가 느린 경우 b.js를 다운로드하여 실행을 시작하면 해당 파일이 의존하는 a.js의 변수나 메서드가 작동하지 않게 됩니다. 도착.

생각나는 해결책은 다음 파일을 로드하기 전에 이전 파일이 로드될 때까지 기다리는 것입니다. 대략적인 코드는 다음과 같습니다.

function loadJsFiles(jsFiles) {
    return new Promise((resolve, reject) => {
        var load = function(i) {
            var file = jsFiles[i];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.onload = function() {
                i++;
                if(i === jsFiles.length) {
                    resolve();
                } else {
                     load(i);
                }
            }
            script.src = file;
            head.appendChild(script);
        };
        load(0);
    });
}

위 방법은 연결된 Promise 호출이나 콜백 중첩으로 변경할 수도 있습니다. 드디어 문제가 해결됐는데, 파일이 비동기 로딩에서 동기 로딩으로 바뀌면서 파일 다운로드 시간이 늘어나게 되면서 그 영향이 더욱 뚜렷해지게 되는 문제가 있습니다. 따라서 파일을 비동기적으로 로드하는 것이 올바른 생각이지만 파일을 실행할 때 해당 파일이 종속된 파일이 먼저 로드되어 실행될 때까지 기다려야 합니다. 이 문제에 대해서는 require.js와 같은 타사 라이브러리에서 배울 수 있습니다. , 또는 es6에 도입된 모듈 이 기능은 이러한 문제를 완벽하게 해결합니다.

위 내용은 자바스크립트 파일을 동적으로 로드할 때 순차적으로 실행되게 하는 방법 (코드는 다음과 같습니다)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!