Sự kiện kích hoạt khi jQuery đang được tải

Tôi đang hợp nhất việc sử dụng API iFrame của YouTube và jQuery được tải thông qua thẻ tập lệnh có bộ cờ defer. Cờ trì hoãn phải được đặt là khách hàng có điểm số thông tin chi tiết về trang Google hoàn hảo và muốn duy trì điểm số đó.Sự kiện kích hoạt khi jQuery đang được tải

API YouTube, khi được tải đầy đủ và sẵn sàng để sử dụng, immediatley gọi hàm mà tôi xác định onYouTubeIframeAPIReady. Sau đó nó sẽ gọi onPlayerReady khi trình phát được tải và hiển thị đầy đủ.

Tôi muốn sử dụng jQuery trong hàm này, nhưng chỉ cần sử dụng jQuery bên trong hàm onPlayerReady sẽ tạo điều kiện cuộc đua (hy vọng thư viện jQuery đã tải xong khi thời gian onPlayerReady được gọi).

Nó xảy ra với tôi một giải pháp khả thi là sử dụng hàm onPlayerReady để đặt biến trước khi gọi một hàm kiểm tra cả trình phát và jQuery. Một hàm khác đặt một biến khi jQuery đang sẵn sàng và gọi hàm kiểm tra tương tự.

Tôi có một số mã hoạt động, nhưng phần kiểm tra jQuery có vẻ lộn xộn với tôi và cũng giới thiệu một lượng nhỏ sự chậm trễ không cần thiết thêm. Tôi đã tự hỏi nếu có ai biết một cách tốt hơn để chạy một cái gì đó ngay lập tức jQuery trở nên có sẵn. Về cơ bản, có callbacks cho jQuery trở nên có sẵn được xây dựng vào thư viện chính nó?

mã hiện tại của tôi là như sau:

var ready = { 
    'jquery': false, 
    'youtube' false 
}, 
testJQueryLoaded; 

testJQueryLoaded = function() { 
    if(typeof jQuery == 'undefined') { 
     window.setTimeout(function() { 
      testJQueryLoaded(); 
     }, 25); 
     return; 
    } 

    ready.jquery = true; 
    postLibraryLoad(); 
}; 

testJQueryLoaded(); 

function onYouTubeIframeAPIReady() { 
    // Stuff 
}; 

function onPlayerReady() { 
    ready.youtube = true; 
    postLibraryLoad(); 
}; 

function postLibraryLoad() { 
    if(!ready.jquery || !ready.youtube) { 
     return; 
    } 

    // More stuff 
};

Nguồn

2017-09-11 Scoots

không, không có sự kiện như vậy. tuy nhiên bạn có thể nối thêm thẻ script thông qua javascript và lắng nghe các sự kiện của nó. –

Theo đề nghị của @KevinB bạn có thể sử dụng load trường hợp yếu tố cụ thể <script>

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script> 
 
    <script defer> 
 
    const dojQueryStuff = (el, params) => this.jQuery(el, params).appendTo("body"); 
 
    </script> 
 
    <script defer> 
 
    document 
 
    .querySelector("script[src$='3.2.1/jquery.min.js']") 
 
    .onload = event => { 
 
     console.log(event.target.src); 
 

 
     dojQueryStuff("<div>", { 
 
     html: "jQuery version: " + this.jQuery().jquery + " loaded" 
 
     }); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

Nguồn

2017-09-18 07:07:01 guest271314

Có chính xác những gì tôi đang tìm kiếm, cảm ơn bạn. – Scoots

Tôi cho rằng .ready() sẽ làm gì.

$(document).ready(function(){ 
    ready.jquery = true; 
    postLibraryLoad(); 
});

Bạn có thể biết nhưng ..
1. Điều này sẽ không ném lỗi thực hiện trước khi jQuery được nạp, và
2. Điều này sẽ thực hiện một lần và chỉ khi jQuery đã sẵn sàng.

Vì vậy, tôi giả sử mã này dưới đây hoạt động:

var ready = { 
    'jquery': false, 
    'youtube': false 
}; 

$(document).ready(function(){ 
    ready.jquery = true; 
    postLibraryLoad(); 
}); 

function onYouTubeIframeAPIReady() { 
    // Stuff 
} 

function onPlayerReady() { 
    ready.youtube = true; 
    postLibraryLoad(); 
} 

function postLibraryLoad() { 
    if(!ready.jquery || !ready.youtube) { 
     return; 
    } 

    // More stuff 
}

Giả sử onYouTubeIframeAPIReady() được kích hoạt tại một nơi khác trước hết, mã này nên chạy postLibraryLoad() lên đến hai lần hoặc sau khi youtube là sẵn sàng hay jQuery đã sẵn sàng, cuối cùng chỉ chạy // More stuff khi cả hai đã sẵn sàng.

chỉnh sửa: Định dạng
chỉnh sửa: thêm lời giải thích

Nguồn

2017-09-14 21:18:42 AlexKlaus

Đáng buồn là nó gây ra lỗi, một lần nữa trên tài khoản của lá cờ trì hoãn được đặt trên tải thư viện jQuery '' - cờ này gây ra (từ thông số HTML5) "tập lệnh được thực thi khi trang đã phân tích cú pháp xong". Trên tài khoản của trang điểm số sâu sắc như vậy là phải có cho khách hàng của tôi, tất cả các javascript PHẢI được Nghiên cứu của riêng tôi đã khiến tôi tin rằng bao gồm cả mã này trong một tệp defer'd sẽ giới thiệu một điều kiện chủng tộc khác trong một số trình duyệt: https://stackoverflow.com/a/10731231/4027341 – Scoots

Bạn nên có mã của bạn lod không đồng bộ quá.Một (thú vị) cách để ngăn chặn điều kiện chủng tộc là holdReady: https://api.jquery.com/jQuery.holdReady/ –

@Scoots Ah, xin lỗi tôi hoàn toàn bị mất điểm. Điều này có thể được kỳ diệu nhưng liệu có thể tạo một tệp kịch bản chứa cả jQuery cộng với mã của bạn, thay vì hai tệp riêng biệt? – AlexKlaus

Tôi biết điều này có vẻ kỳ lạ, nhưng nếu đó là các mã nhỏ, bạn đang lo lắng về, thì tại sao bạn không thêm nó vào bên trong thư viện jQuery, tại đáy. và gọi số onYouTubeIframeAPIReady(). bạn cũng có thể xóa hoàn toàn phần này ready.jquery = true;.

Nguồn

2017-09-16 02:40:48 lpradhap

Mã API YouTube cần phải là động - các trang khác nhau có các video khác nhau phát, do đó, trong khi giải pháp có khả năng tốt trong chân không, thì nó không phù hợp ở đây. +1 mặc dù – Scoots

Sự kiện kích hoạt khi jQuery đang được tải

Trả lời

Các vấn đề liên quan