ব্রাউজার যদি দেশীয় প্রতিশ্রুতিগুলি সমর্থন না করে তবে মাইক্রোটাস্ককে কীভাবে সজ্জিত করা যায়?

Question

এমন কোড লিখিত ভাল যা তাত্ক্ষণিক কলব্যাকের সময় (মাইক্রোটাস্ক বনাম ম্যাক্রোটাস্কের মতো) এর উপর নির্ভর করে না, তবে এই মুহুর্তের জন্য আলাদা করে দেওয়া যাক।

setTimeoutএকটি ম্যাক্রোটাস্ক সারিতে সজ্জিত করে, যা সর্বনিম্নে সমস্ত মাইক্রোটাস্ক (এবং তারা যে মাইক্রোটাস্কগুলি স্প্যান করে) শেষ না হওয়া পর্যন্ত শুরু হওয়ার অপেক্ষায় থাকে। এখানে একটি উদাহরণ:

console.log('Macrotask queued');
setTimeout(function() {
  console.log('Macrotask running');
});
Promise.resolve()
  .then(function() {
    console.log('Microtask running');
  });
console.log('Microtask queued');
console.log('Last line of script');

একটি আচরণকে .thenএকটি সমাধান প্রতিশ্রুতি উপর একটি তাৎক্ষণিক আচরণ থেকে মৌলিকভাবে ভিন্ন setTimeoutকলব্যাক - প্রতিশ্রুতি .thenপ্রথম চালানো হবে, এমনকি যদি setTimeoutপ্রথম সারিতে রয়েছে যায়নি। তবে শুধুমাত্র আধুনিক ব্রাউজারগুলি প্রতিশ্রুতিগুলি সমর্থন করে। কিভাবে করতে বিশেষ একটি microtask কার্যকারিতা সঠিকভাবে যদি polyfilled করা Promiseবিদ্যমান নেই?

আপনি যদি কোনও .thenমাইক্রোটাস্ক ব্যবহার করে অনুকরণ করার চেষ্টা করেন setTimeout, আপনি মাইক্রোটাস্ক নয়, ম্যাক্রোটাস্কের সন্ধান করছেন, সুতরাং .thenম্যাক্রোটাস্ক ইতিমধ্যে সারি করা থাকলে খারাপভাবে পলফিল্ড সঠিক সময়ে চলবে না।

ব্যবহার করে একটি সমাধান রয়েছে MutationObserver, তবে এটি দেখতে কুৎসিত দেখাচ্ছে, এবং এটির জন্য নয় MutationObserver। এছাড়াও, MutationObserverআইই 10 এবং এর আগে সমর্থিত নয়। যদি কেউ এমন পরিবেশে মাইক্রোটাস্কের সারি তৈরি করতে চান যা স্থানীয়ভাবে প্রতিশ্রুতিগুলিকে সমর্থন করে না, তবে এর চেয়ে আরও ভাল বিকল্প কি আছে?

(আমি আসলে IE10 কে সমর্থন করার চেষ্টা করছি না - মাইক্রোটাস্কগুলি কীভাবে প্রতিশ্রুতি ব্যতীত সারিবদ্ধ করা যায় সে সম্পর্কে এটি কেবল একটি তাত্ত্বিক অনুশীলন)

Comments

আমি প্রতিশ্রুতি বাস্তবায়নের উপর নজর রাখার পরামর্শ দেব যা কার্য সম্পাদনমুখী, বিশেষত ব্লুবার্ড। এর ইতিহাস পর্যালোচনাschedule.js করা আলোকিত হবে।

— বার্গি

আপনি কি কোর-জেসের মতো কিছু ব্যবহার করে প্রতিশ্রুতিটি পলিফিলিংয়ের চেষ্টা করেছেন?

— হুগো

Answer 1

আমরা যদি IE সম্পর্কে কথা বলি তবে আপনি ব্যবহার করতে পারেন setImmediate

https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate

এছাড়াও, মিউটেশনঅবার্সার আইই 10 এবং এর আগে সমর্থিত নয়।

setImmediateIE10 এ সমর্থিত। সুতরাং প্লাস ওয়ান সংস্করণ।
এবং, যদি আপনার আগ্রহী হয় তবে, আরও Node.js.

মিউটেশনঅবার্সার ব্যবহার করে একটি সমাধান রয়েছে, তবে এটি দেখতে কুৎসিত দেখাচ্ছে এবং মিউটেশনঅবার্সারের পক্ষে এটি নয়।

অন্যান্য সম্ভাব্য পলিফিল রয়েছে, এখানে কয়েকটি বাস্তবায়ন রয়েছে: https://github.com/YuzuJS/setImedia/blob/master/setImedia.js (এটি এমডিএন-তে উল্লেখ করা হয়েছে) https://github.com/taylorhakes/ setAsap / blob / মাস্টার / setAsap.js (আরও সহজ একটি)

এবং প্রায় সমস্ত পলিফিলগুলি পাশাপাশি কুশ্রী।

তবে যাইহোক, এখানে তার সারমর্মের একটি উদাহরণ রয়েছে (পোস্টমেসেজ ব্যবহার করে), এবং আমি মনে করি এটি সকলের চেয়ে কদর্য (তবে সত্যিকারের পলিফিলও নয়)

var setImmediate = (function() {
  var queue = [];

  function on_message(e) {
    if(e.data === "setImmediateMsg") queue.pop()()
  }

  if(window.addEventListener) { // IE9+
    window.addEventListener('message', on_message)
  } else { // IE8
    window.attachEvent('onmessage', on_message)
  }

  return function(fn) {
    queue.unshift(fn)
    window.postMessage("setImmediateMsg", "*")
  }
}())

setTimeout(function() {
  console.log('Macrotask running');
});
console.log('Macrotask queued');
setImmediate(function() {
  console.log('Microtask running');
});
console.log('Microtask queued');
console.log('Last line of script');

Comments

দুর্দান্ত আবিষ্কার, আমি তাদের সব পছন্দ!

— তুষার

@ আসুন, যাইহোক, আপনি বলেছিলেন এটি একটি তাত্ত্বিক অনুশীলন, তবে, আমি এখনও কৌতূহলী, আপনি কীভাবে এই ধারণাটি 2019 সালে এসেছিলেন?

— x00

আমি কেবল ভাবছিলাম যে মাইক্রোটাস্কগুলি কীভাবে সজ্জিত করা যেতে পারে, সত্যিকারভাবে সুনির্দিষ্ট কিছু ছিল না। আমি আশাবাদী ছিলাম যে ভাষার মধ্যে এমন কিছু তৈরি হয়েছিল যা তাদের কাছে অ্যাক্সেস সরবরাহ করেছিল, প্রতিশ্রুতি ব্যতীত, তবে দেখে মনে হচ্ছে সেখানে নেই। অন্যান্য সমস্ত পদ্ধতিতে পরিবেশ-নির্দিষ্ট quirks আহ্বান করা জড়িত থাকে যা এই ধরণের জিনিসটির জন্য ডিজাইন করা হয়নি (তবে যেভাবেই কাজ করার জন্য ঘটে )।

— তুষারপাত

Answer 2

আমি দেখেছি যে mutationObserverকলব্যাকগুলি মাইক্রোটাস্ক ব্যবহার করে, এবং ভাগ্যক্রমে, আইই 11 এটি সমর্থন করে, তাই কলব্যাকটি সংরক্ষণ করে এবং সঙ্গে সঙ্গে একটি উপাদান পরিবর্তন করে পর্যবেক্ষককে ট্রিগার করে আইই 11 এ মাইক্রোটাস্কটি সন্নিবেশ করার ধারণাটি পেয়েছিলাম:

var weirdQueueMicrotask = (function() {
  var elementThatChanges = document.createElement('div');
  var callback;
  var bool = false;
  new MutationObserver(function() {
    callback();
  }).observe(elementThatChanges, { childList: true });
  return function(callbackParam) {
    callback = callbackParam;
    elementThatChanges.textContent = bool = !bool;
  };
})();

setTimeout(function() {
  console.log('Macrotask running');
});
console.log('Macrotask queued');
weirdQueueMicrotask(function() {
  console.log('Microtask running');
});
console.log('Microtask queued');
console.log('Last line of script');

আপনি IE11 খুলতে এবং উপরের কাজ দেখতে পারেন, কিন্তু কোডটি অদ্ভুত দেখাচ্ছে।