ฉันมีสคริปต์ jquery ซึ่งฉันต้องการเรียกใช้เพียงครั้งเดียวทุกอย่างในหน้ารวมถึงจาวาสคริปต์อื่น ๆ (ซึ่งฉันไม่สามารถควบคุมได้) ทำสิ่งนั้นเสร็จแล้ว
แม้ว่าบางทีอาจจะมีทางเลือกอื่นแทน $ (document) แต่ก็หาไม่เจอ
ฉันมีสคริปต์ jquery ซึ่งฉันต้องการเรียกใช้เพียงครั้งเดียวทุกอย่างในหน้ารวมถึงจาวาสคริปต์อื่น ๆ (ซึ่งฉันไม่สามารถควบคุมได้) ทำสิ่งนั้นเสร็จแล้ว
แม้ว่าบางทีอาจจะมีทางเลือกอื่นแทน $ (document) แต่ก็หาไม่เจอ
คำตอบ:
คุณสามารถมีได้$(document).ready()หลายครั้งในหนึ่งหน้า โค้ดจะทำงานตามลำดับที่ปรากฏ
คุณสามารถใช้$(window).load()เหตุการณ์สำหรับโค้ดของคุณได้เนื่องจากเหตุการณ์นี้เกิดขึ้นหลังจากโหลดเพจจนเต็มและโค้ดทั้งหมดในตัว$(document).ready()จัดการต่างๆทำงานเสร็จแล้ว
$(window).load(function(){
//your code here
});
$(window).on('load', function() { });เนื่องจาก $ (window) .load () เลิกใช้แล้ว
บล็อกรหัสนี้ช่วยแก้ปัญหาของฉัน
<script type="text/javascript">
$(window).bind("load", function () {
// Code here
});
</script>หลายรายการ$(document).ready()จะเริ่มทำงานตามลำดับจากบนลงล่างของหน้า สุดท้าย$(document).ready()จะเริ่มทำงานครั้งสุดท้ายบนหน้า ในช่วงสุดท้าย$(document).ready()คุณสามารถทริกเกอร์เหตุการณ์ที่กำหนดเองใหม่ให้เริ่มทำงานหลังจากเหตุการณ์อื่น ๆ ทั้งหมด ..
รวมโค้ดของคุณไว้ในตัวจัดการเหตุการณ์สำหรับเหตุการณ์ที่กำหนดเองใหม่
<html>
<head>
<script>
$(document).on("my-event-afterLastDocumentReady", function () {
// Fires LAST
});
$(document).ready(function() {
// Fires FIRST
});
$(document).ready(function() {
// Fires SECOND
});
$(document).ready(function() {
// Fires THIRD
});
</script>
<body>
... other code, scripts, etc....
</body>
</html>
<script>
$(document).ready(function() {
// Fires FOURTH
// This event will fire after all the other $(document).ready() functions have completed.
// Usefull when your script is at the top of the page, but you need it run last
$(document).trigger("my-event-afterLastDocumentReady");
});
</script>
จากที่นี่ :
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait()
{
if(typeof unsafeWindow.jQuery == 'undefined')
{
window.setTimeout(GM_wait,100);
}
else
{
$ = unsafeWindow.jQuery;
letsJQuery();
}
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery()
{
// Do your jQuery stuff in here
}
สิ่งนี้จะรอจนกว่า jQuery จะถูกโหลดเพื่อใช้งาน แต่คุณสามารถใช้แนวคิดเดียวกันตั้งค่าตัวแปรในสคริปต์อื่น ๆ ของคุณ (หรือตรวจสอบว่าไม่ใช่สคริปต์ของคุณหรือไม่) เพื่อรอจนกว่าจะโหลดเพื่อใช้งาน
ตัวอย่างเช่นในไซต์ของฉันฉันใช้สิ่งนี้สำหรับการโหลด JS แบบอะซิงโครนัสและรอจนกว่าจะเสร็จสิ้นก่อนที่จะทำอะไรกับพวกเขาโดยใช้ jQuery:
<script type="text/javascript" language="JavaScript">
function js(url){
s = document.createElement("script");
s.type = "text/javascript";
s.src = url;
document.getElementsByTagName("head")[0].appendChild(s);
}
js("/js/jquery-ui.js");
js("/js/jrails.js");
js("/js/jquery.jgrowl-min.js");
js("/js/jquery.scrollTo-min.js");
js("/js/jquery.corner-min.js");
js("/js/jquery.cookie-min.js");
js("/js/application-min.js");
function JS_wait() {
if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
typeof getLastViewedArchive == 'undefined' || // set in application-min.js
typeof getAntiSpamValue == 'undefined') // set in application-min.js
{
window.setTimeout(JS_wait, 100);
}
else
{
JS_ready();
}
}
function JS_ready() {
// snipped
};
$(document).ready(JS_wait);
</script>
ปรากฎว่าเป็นเพราะส่วนผสมที่แปลกประหลาดของเฟรมเวิร์กจาวาสคริปต์ที่ฉันต้องเริ่มต้นสคริปต์โดยใช้ตัวฟังเหตุการณ์ที่จัดเตรียมโดยหนึ่งในเฟรมเวิร์กอื่น ๆ
คุณได้ลองโหลดฟังก์ชันการเริ่มต้นทั้งหมดโดยใช้$().readyฟังก์ชัน jQuery ที่คุณต้องการเป็นครั้งสุดท้ายหรือไม่?
บางทีคุณอาจใช้setTimeout()กับ$().readyฟังก์ชันที่คุณต้องการเรียกใช้โดยเรียกใช้ฟังก์ชันที่คุณต้องการโหลด
หรือใช้setInterval()และตรวจสอบช่วงเวลาเพื่อดูว่าฟังก์ชันโหลดอื่น ๆ ทั้งหมดเสร็จสมบูรณ์หรือไม่ (เก็บสถานะไว้ในตัวแปรบูลีน) เมื่อตรงตามเงื่อนไขคุณสามารถยกเลิกช่วงเวลาและเรียกใช้ฟังก์ชันโหลด
$(window).load(function(){...})