সেটটাইমআউট () কেন আমার অ্যাপ্লিকেশনটিকে পিছিয়ে রাখে, তবে রেক্সজেএস টাইমার ()। সাবস্ক্রাইব (…) করে না?

Question

আমার একটি উপাদান রয়েছে, এটি 100 মিলির ব্যবধানে "অলস লোড" কিছু মন্তব্য করে।

আমি যখন সেটটাইমআউট ব্যবহার করি তখন সত্যিই পিছিয়ে যায়।

উপাদান

<div *ngFor="let post of posts">
   <app-post [post]="post" ></app-post>
</div>

এটি আমার অ্যাপ্লিকেশনটি দীর্ঘায়িত করে তোলে (গড় এফপিএস 14, অলস সময় 51100 মিমি):

while(this.postService.hasPosts()){
  setTimeout(()=> {
   this.posts.push(this.postService.next(10));
  },100);
}

এটি আমার অ্যাপ্লিকেশনটিকে মসৃণ করে তোলে (গড় fps 35, অলস সময় 40800 মিমি)

while(this.postService.hasPosts()){
  timer(100).subscribe(()=> {
    this.posts.push(this.postService.next(10));
  });
}

কোনও ব্যাখ্যা আছে, কেন rxjs টাইমার, যে আরও ভাল কাজ করে?

আমি ফায়ার ফক্সের সাথে একটি রানটাইম বিশ্লেষণ করেছি। প্রথম উদাহরণে, ফ্রেমের হার 14 fps এ নেমে আসে অন্য উদাহরণে, 35 fps।

এমনকি অলস সময়টি 20% কম।

এই পদ্ধতিটি আরও মসৃণ (औसत এফপিএস 45, অলস সময় 13500 মিমি):

interval(100).pipe(takeWhile(this.postService.hasPosts()).subscribe(()=> {
    this.posts.push(this.postService.next(10));
  });
}

Answer 1

আপনার শেষ সমাধানটিই একমাত্র সঠিক।

অন্য দুটি সমাধানগুলির মতো কাজ করা উচিত নয় যেমনটি আপনি তাদের কাজ করে বলেছিলেন। আসলে, এর ফলস্বরূপ অসীম লুপ হওয়া উচিত।

এটি জাভাস্ক্রিপ্টের ইভেন্টলুপ কীভাবে কাজ করে তার কারণেই । নিম্নলিখিত চিত্রটি জাভাস্ক্রিপ্ট রানটাইমের একটি মডেল দেখায় (চিত্রটি এখান থেকে নেওয়া হয়েছিল ):

আমাদের জন্য প্রাসঙ্গিক অংশগুলি হ'ল stackএবং queue। একটি জাভাস্ক্রিপ্ট রানটাইম বার্তাগুলিতে প্রক্রিয়া করেqueue । প্রতিটি বার্তা একটি ফাংশনের সাথে সম্পর্কিত যা বার্তাটি প্রক্রিয়াজাত হওয়ার সাথে সাথে ডাকে।

স্ট্যাকের জন্য, প্রতিটি ফাংশন কল স্ট্যাকের উপরে একটি ফ্রেম তৈরি করে যা ফাংশন আর্গুমেন্ট এবং স্থানীয় ভেরিয়েবলগুলি ধারণ করে। যদি কোনও ফাংশন অন্য ফাংশনটিকে কল করে তবে একটি নতুন ফ্রেম স্ট্যাকের শীর্ষে চাপানো হবে। যখন কোনও ফাংশন ফিরে আসে শীর্ষ ফ্রেমটি স্ট্যাকের বাইরে বেরিয়ে যায়।

এখন যদি স্ট্যাকটি খালি হয় তবে জাভাস্ক্রিপ্ট রানটাইম পরবর্তী বার্তাকে queue(সবচেয়ে পুরানো) প্রক্রিয়াকরণ করবে ।

আপনি যদি ব্যবহার করেন setTimeout(() => doSomething(),100)তবে doSomething()ফাংশনটি 100 মিলিসেকেন্ডের পরে সারিটিতে যুক্ত হবে। এই কারণেই 100 মিলিসেকেন্ড কোনও গ্যারান্টিযুক্ত সময় নয় তবে একটি ন্যূনতম সময়। সুতরাং আপনার doSomething methodকেবলমাত্র ডেকে আনা হবে, যদি স্ট্যাকটি খালি থাকে এবং আর কিছু নেই যা সারিতে নেই।

তবে আপনি যখন কিছুক্ষণ লুপটিতে পুনরাবৃত্তি করছেন এবং আপনার অবস্থাটি আপনার অভ্যন্তরের কোডের উপর নির্ভর করে setTimeout, আপনি একটি অসীম লুপ তৈরি করেছেন কারণ স্ট্যাকটি খালি পাবে না এবং তাই আপনারthis.posts.push(this.postService.next(10)); কোডটি কখনও কল করা হবে না।

আরএক্সজেএস বাস্তবায়নের ক্ষেত্রে একই কথা সত্য। সময় নির্ধারণের জন্য তারা শিডিয়ুলার ব্যবহার করে। সেখানে RxJS বিভিন্ন অভ্যন্তরীণ নির্ধারণকারী বাস্তবায়নের আছে, কিন্তু যেমন আমরা জন্য বাস্তবায়নের দেখতে পাবেন intervalএবং timer, যদি আমরা একটি নির্ধারণকারী নির্দিষ্ট না ডিফল্ট এক asyncScheduler হয়। AsyncScheduler वेळापत्रकগুলি উপরে উল্লিখিত setIntervalমত কাজ setTimeoutকরে এবং কিউতে অন্য একটি বার্তা ধাক্কা দেয়।

আমি আপনার দুটি সমাধানের সাথে লুপটি দিয়ে চেষ্টা করেছি এবং আসলে প্রথমটি আমার ব্রাউজারটিকে পুরোপুরি হিমায়িত করে যখন দ্বিতীয়টি সুপার লেগি তবে লুপের ভিতরে কনসোলে কিছু আউটপুট দিতে পারে could আমি আসলে জানি না কেন দ্বিতীয়টি একটু বেশি পারফরম্যান্ট, তবে তবুও উভয়ই আপনি যা চান তা নয়। আপনি ইতিমধ্যে একটি ভাল সমাধান নিয়ে এসেছেন এবং আমি আশা করি যে এই উত্তরটি আপনাকে বুঝতে সহায়তা করতে পারে যে প্রথম সমাধানগুলি কেন এত খারাপ কাজ করে।