Làm cách nào để trì hoãn việc chạy một số mã JS cho đến khi TẤT CẢ các tệp JS không đồng bộ của tôi được tải xuống?

Question

CẬP NHẬT:

Tôi có đoạn mã sau:

<script type="text/javascript"> 
function addScript(url) { 
    var script = document.createElement('script'); 
    script.src = url; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 
addScript('http://google.com/google-maps.js'); 
addScript('http://jquery.com/jquery.js'); 

... 

// run code below this point once both google-maps.js & jquery.js has been downloaded and excuted 

</script> 

Làm thế nào tôi có thể ngăn chặn mã từ thực hiện cho đến khi tất cả các yêu cầu JS đã tải về và thực hiện? Trong ví dụ trên, các tệp được yêu cầu đó là google-maps.js và jquery.js.

Answer 1

Bạn có thể sử dụng các sự kiện onload của yếu tố kịch bản đối với hầu hết các trình duyệt, và sử dụng một hàm callback:

Edit: Bạn có thể không thực sự đình chỉ thi hành các mã khi bạn tải tập lệnh theo cách này (và thực hiện các yêu cầu Ajax đồng bộ là một ý tưởng tồi tệ nhất trong các lần).

Nhưng bạn có thể callbacks chuỗi, vì vậy nếu bạn có một số mã mà phụ thuộc vào cả hai, Two.js và Three.js, bạn có thể chuỗi những hành động bốc, ví dụ:

loadScript('http://example.com/Two.js', function() { 
    // Two.js is already loaded here, get Three.js... 
    loadScript('http://example.com/Three.js', function() { 
    // Both, Two.js and Three.js loaded... 
    // you can place dependent code here... 
    }); 
}); 

Thực hiện:

function loadScript(url, callback) { 
    var head = document.getElementsByTagName("head")[0], 
     script = document.createElement("script"), 
     done = false; 

    script.src = url; 

    // Attach event handlers for all browsers 
    script.onload = script.onreadystatechange = function(){ 
    if (!done && (!this.readyState || // IE stuff... 
     this.readyState == "loaded" || this.readyState == "complete")) { 
     done = true; 
     callback(); // execute callback function 

     // Prevent memory leaks in IE 
     script.onload = script.onreadystatechange = null; 
     head.removeChild(script); 
    } 
    }; 
    head.appendChild(script); 
} 

Đối với IE, sự kiện onreadystatechange có bị ràng buộc.

Answer 2

Tôi chỉ đọc CMS's answer và quyết định rằng từ nhận xét "hầu hết các trình duyệt" của mình, tôi có thể có lỗi khi làm việc cho những người không có chức năng này nguyên bản.

Về cơ bản, đó là khoảng thời gian mà cuộc thăm dò cho một biến.

var poll = window.setInterval(function() { 

    if (typeof myVar !== 'undefined') { 
     clearInterval(poll); 
     doSomething(); 
    }; 

}, 100);