لا أقصد أن أستدعي موقعا آخر ب JavaScript
أقصد نفس الصفحة التي أنت تعمل عليها
مثل في youtube عندما تدخل لصفحة يظهر شريط يبين النسبة التي وصل إليها تحميل الصفحة
أو مثلا عندما تدخل لموقع فيظهر لك %0 وتزداد مع تحميل الصفحة إلى أن تصل إلى %100
ثم يظهر لك الموقع مكتمل التحميل
هأنا أكتب الرد للمرة الثالثة متى ستحل مشكلة الرجوع عند الحذف!
إن كنت تقصد معرفة مقدار التحميل بالمقدار فهذا لا يمكن أو سيشبه أن يستحيل فعله؛ لن يمكنك معرفة كم تريد أن تحمل ملفات css، js، الخطوط، الصور...، ستحتاج على الأقل إلى أستلام ترويسة Content-Length، وهذا قد ينتج عنه بعض المشاكل قد تحمل بعض الملفات قبل أن تعرف مساحة الآخرى فلن يكون المحمل صحيحًا، أصلًا إن استطعت أن تراقب الطلبات، أو ستستخدم ajax لتحميل تلك الملفات.
بدلًا من ذلك ستستخدم مراحل تحميل المستند لم يتم البدء، جاري التحميل، تم التحميل، تم الإنتهاء من أغلب الأشياء، تم الإنتهاء، نفِّذ هذه الشيفر بعد تحميل الdocument يجب أن يكون في سياق الhead وأجعل المحمل يتحرك كلما تغيرت الحالة:
"use strict";
document.onreadystatechange = () => {
switch (document.readyState) {
case "uninitialized":
alert("لم يتم البدء");
case "loading":
console.log("جاري التحميل");
case "loaded":
console.log("تم التحميل جاري إعداد الصفحة");
case "interactive":
console.log("تم تحميل أغلب الأشياء");
case "complete":
console.log("تم الإنتهاء");
}
}
ملاحظة صديقي اطلعت على الشيفرة التي كتبتها في الآعلى لما لا تستخدم طريقة تصميم شيفرة JavaScript[1]، ثم المُغير A أراه محلي عرفه بداخل while{} باستخدام let لا حاجة لجعله عام في الدّالّة، أيضًا لماذا تكتب 0.000000000000001، javascript تدعم الكتابة العلمية 1 * 10⁻¹⁵، ليكون كالتالي في JavaScript يساوي 1e-15، أدعواْ الله أن يوفقك.
/*global console*/
function ready() {
"use strict";
switch (document.readyState) {
case "uninitialized":
console.log("لم يبدأ التحميل بعد");
break;
case "loading":
console.log("جاري التحميل");
break;
case "loaded":
console.log("جاري إعداد الصفحة");
break;
case "interactive":
console.log("تم تحميل أغلب الأشياء");
break;
case "complete":
console.log("تم الإنتهاء");
break;
}
}
ready();
document.onreadystatechange = function () {
"use strict";
ready();
};
أعدت صياغة الكود حسب ما فهمت أضن أنه يقوم بنفس المهمة لدي أسئلة عن الكود - عندما أشغل الكود يظهر فقط
جاري التحميل
تم تحميل أغلب الأشياء
تم الإنتهاء
هل لأنه مر على المرحلة "جاري إعداد الصفحة" بسرعة لم يظهرها؟
() => {}
هل لها نفس مهمة function؟
وجزاك الله كل خير أخي :)
جاري التحميل
تم تحميل أغلب الأشياء
تم الإنتهاء
في الحقيقة لا أعلم قد يكون أيضًا يختلف من متصفح إلى آخر.
هل لها نفس مهمة function؟
هذه الدوال السهمية أتت من الإصدار الجديد من مواصفة ES، الذي يسمى ES6 هي دالة لكنها تختلف في السياق الخاصة بها عن function، فهي ترمز دائمًا إلى نفس السياق يكون this كما هو ثابت، بعكس function، مثلًا هذا لن يعمل:
class Caller {
constructor() {
this.test = "Worked";
(function() {
alert(this.test); // خطأ this يشير إلى شيء آخر أو لا شيء!
})();
}
}
new Caller()
يمكن استخدام bind لتثبيت قيمة this لكنه حل ترقيعي وسيء، باستخدام الدوال السهمية ستعمل لأن قيمة this لا تتغير:
class Caller {
constructor() {
this.test = "Worked";
(() => {
alert(this.test);
})();
}
}
new Caller()
بالطبع لن تحدث مشاكل إن استخدمتها بدلًا من function كسلًا أو استسهالًا كما أفعل:)
بالمناسبة كنت أكتب عن الموضوع في سلسلة تخص typescript وتناسيت نشرها، تذكرت الآن، شكرًا لك.
التعليقات