كيف يمكنني إعداد تسلسلات من الوظائف التي أريد تنفيذها في JavaScript؟

Question

أنا أعمل على موقع يحركه JavaScript حيث سيكون لدي الكثير من الأشياء التي تحتاج إلى تنفيذها بترتيب معين. يتضمن الكثير من الأشياء الرسوم المتحركة وحمل Ajax. يمكن أن تبدو بعض كود Pseudo مثل هذا:

1. تحميل بيانات مكونة من JSON
2. قم بإنشاء عناصر HTML باستخدام بيانات JSON المحملة وتقديمها داخل Div
3. اجعل العناصر داخل DIV قابلة للتمرير باستخدام شريط تمرير JQuery UI
4. قم بعشوائية رقم بين 1 وإجمالي عدد العناصر المحملة
5. اجعل تمرير منزلق jQuery UI (تحريك) إلى العنصر الذي يمثل الرقم العشوائي لمدة 500 ميلي ثانية
6. قم بتحميل المزيد من بيانات JSON المصنفة
7. استبدال العناصر الأخرى على الصفحة
8. وهلم جرا...

يتم لف كل خطوة في هذا في دالة - إحدى دالة تعمل على تحميل بيانات JSON ، وآخر ينشئ عناصر HTML ، وتهيئة ثلث تمثيل منزلق UI JQuery وما إلى ذلك. إن تغليف الكود في الوظائف يجعل القراءة من الكود أسهل من أجله ، لكن قبل كل شيء أريد أن أكون قادرًا على استدعاء الوظائف في أوامر مختلفة اعتمادًا على ما يحدث في الصفحة وأريد أن أتأكد من أن وظيفة واحدة قد انتهت من تشغيلها قبل يتم تنفيذ واحد التالي.

إذا كانت هناك وظائف منتظمة فقط لا تتضمن رسوم متحركة Ajax أو jQuery ، فسوف أقوم بتنفيذ الوظائف التي أرغب في تنفيذها ، واحدة تلو الأخرى. المشكلة هي أنني بحاجة إلى الانتظار حتى تنتهي وظائف الرسوم المتحركة واسترداد البيانات قبل الانتقال. لمساعدتي على كل من أساليب الرسوم المتحركة وأجاكس في jQuery ، تسمح لي بالإرسال على طول رد الاتصال. ولكن هنا حيث أضيع.

ما أريد أن أفعله هو ما يلي:

1. تحميل بيانات JSON. إذا نجح التحميل ، فاستمر و ...
2. توليد HTML عناصر
3. اجعل العناصر تمريرها
4. قم بعشوائية رقم بين 1 وإجمالي عدد العناصر المحملة وتمريره إلى ...
5. وظيفة تجعل منزلق jQuery (متحرك) للعنصر. عند الانتهاء من الرسوم المتحركة ...
6. تحميل المزيد من بيانات JSON المصنفة. إذا نجح التحميل ، فاستمر و ...
7. استبدال العناصر الأخرى على الصفحة

الشيء المثالي سيكون إذا كان بإمكاني إعداد هذا التسلسل/سلسلة الأحداث في مكان واحد ، على سبيل المثال داخل معالج الأحداث. إذا كنت أرغب في الاتصال بالوظائف بترتيب مختلف أو لا أتصل بها جميعًا ، فسأقوم فقط بإعداد تسلسل/سلسلة مختلفة. مثال يمكن أن يكون:

1. قم بعشوائية رقم بين 1 وإجمالي عدد العناصر المحملة وتمريره إلى ...
2. وظيفة تجعل منزلق jQuery (متحرك) للعنصر. عند الانتهاء من الرسوم المتحركة ...

هذا يعني أنه يجب أن أكون في السيطرة على عمليات الاسترجاعات في كل خطوة.

أتمنى أن تفهم ما أبحث عنه. أريد التحكم في تسلسل التنفيذ بأكمله من وظيفة واحدة. ستكون هذه الوظيفة "موصل الأوركسترا" وستكون جميع الوظائف الأخرى هي أقسام الأدوات المختلفة في الأوركسترا. يعمل هذا الموصل على آذان الحاجة حتى يتمكن من سماع عندما ينتهي عازف الكمان بفردها ويمكنه إخبار القرون بالبدء في اللعب. إسمح لي بالرمزية المبتذلة ، لكني آمل أن يكون من السهل فهم ما أريد القيام به.

شكرا لك مقدما! /توماس

Answer 1

لقد وجدت أن ما كنت أحاول تحقيقه كان مبالغة قليلاً لأغطيتي. لذلك قررت أن أذهب مع نهج مختلف. يمكنني إرسال واحد أو أكثر من المتغيرات المنطقية كمعلمات إلى وظيفة واستخدامها لتحديد ما إذا كنت تريد تنفيذ وظيفة ثانية أم لا. هذا مثال:

$("#justOneStep").click(function() {
   loadImage(false);
});

$("#twoStepsPlease").click(function() {
   loadImage(true);
});


function loadImage(boolDoMore) {
   // Do the stuff that loads an image
   ...

   if(boolDoMore) {
      nextFunction();
   }
}

function nextFunction() {
   // Do some more stuff
   ...
}

لا يتوهم للغاية ولكن من السهل الفهم والسيطرة على احتياجاتي في الوقت الحالي.

/توماس

Answer 2

سوف jQuery .queue () وظيفة تساعدك؟

Answer 3

هل يمكنك تخزين متغير تسلسل وهو صفيف (يمكنك تغييره) ثم استدعاء جهاز تسلسل في نهاية كل وظيفة؟

يمكنك بعد ذلك تمرير رمز خطوة من خلال كل وظيفة وإعادة تداول مع متغير التسلسل فيما يتعلق بما يجب أن تكون الخطوة التالية.

كود مزيف:

var func['1'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['2'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['3'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

var func['4'] = function(arg1,arg2,seq) {
  //code
  sequencer(seq);
}

function sequencer(seq) {
  seq = seq + 1;
  window.func[seq]
}

Answer 4

حاولت تنفيذ هذا الرمز:

var seq = 0;
var func = [];

func[1] = function(seq) {
    setTimeout(function() {
        console.log("Executing function 1");
        sequencer(seq);
    }, 2000);

}

func[2] = function(seq) {
    console.log("Executing function 2");
    sequencer(seq);
}

func[3] = function(seq) {
    console.log("Executing function 3");
}

function sequencer(seq) {
    seq = seq + 1;
    func[seq].call();
}

sequencer(seq);

لكن النتيجة (في Firebug) هي:

Executing function 1

func[seq] is undefined
[Break on this error] func[seq].call(); 

أعتقد أن المشكلة ناتجة عن السياق ، لكنني لست متأكدًا. JavaScript حساس للسياق الذي تسمى الوظيفة.

/توماس